Question

我正在尝试渲染对象的新实例，但不确定如何调用render函数或如何从对象本身外部设置状态。

//App.js
import React from 'react';
import './App.css';
import DrawMessage from './components/DrawMessage'

function App() {

  var Draw = new DrawMessage();
  Draw.setState({
    test: 'THIS IS A NEW TEST!'
  });

  return (
    <div className="App">
      <header className="App-header">
          <DrawMessage/>
          <Draw/>

      </header>
    </div>
  );
}

export default App;


//DrawMessage.js
import React from 'react'

class DrawMessage extends React.Component {

    constructor (props){
        super(props)
        this.state = {
            test: 'THIS IS A TEST!'
        }
    }

  render () {
    return <div className='message-box'>
      Hello {this.state.test}
    </div>
  }
}

export default DrawMessage

在返回中使用DrawMessage会产生“您好，这是测试！”这是默认响应

但是，如果我能够绘制Draw，我希望看到“您好，这是一项新测试！”因为我想更改“测试”的状态

我假设我不能像以前那样从Draw调用render函数，而且我认为我没有适当地更改测试状态。

Answer 1

从父母那里给孩子打电话setState不是常规的React。我将删除以下所有内容，而只在DrawMessage的{{1}}中调用return：

App

一种实现目标的方法是在其构造函数中设置var Draw = new DrawMessage(); Draw.setState({ test: 'THIS IS A NEW TEST!' });的状态，然后在DrawMessage从componentDidUpdate()传递时通过props对其进行更改。更改。如果您正在考虑该路线，请问自己以下问题：App是否需要具有自己的状态？如果其状态经常从父级更改，则最好将其用作DrawMessage的一部分。 props更改时，React将重新渲染DrawMessage。

componentDidUpdate() docs

Answer 2

通过JSX：var myTinyObject = <TinyObject prop1={prop1} prop2={prop2} />;

通过React.createElement：var myTinyObject = React.createElement(TinyObject, { prop1, prop2 }, null);

如何在reactjs中渲染类的实例？

2 个答案: