更改props值时，React不重新渲染组件

Question

有人可以向我解释为什么在此示例中Component2在Component1更新自己的状态后不更改背景色吗？我将背景色作为值从其他组件的状态传递给了该组件作为prop，但它没有按我的预期工作。

当您单击带边框的框一次时，新的渲染框应在“伪造请求”完成后更改颜色。

 class Component1 extends React.Component{ constructor(props){ super(props) this.state = { color:'red', innerText:'Click on me!' } this.someAsynchronusRequest = this.someAsynchronusRequest.bind(this); } someAsynchronusRequest(){ setTimeout(() => { this.setState({ color:'blue', innerText:'requested completed,it should be blue?' }) },1000) } render(){ return( <div onClick={this.renderBox.bind(this)} className="box click"> <div>{this.state.innerText}</div> </div> ) } renderBox(){ this.someAsynchronusRequest(); ReactDOM.render(<Component2 color={this.state.color}/>,document.getElementById('component2')) } } class Component2 extends React.Component { constructor(props){ super(props) } render(){ return( <div style={{backgroundColor:this.props.color}} className="red box"> </div> ) } } ReactDOM.render(<Component1 />, document.getElementById('component1')) 

 .click { text-align:center; border:1px solid black; } .box { width:100px; height:100px; margin:10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="component1"> </div> <div id="component2"> </div> 

Answer 1

 class Component1 extends React.Component{ constructor(props){ super(props) this.state = { color:'red', innerText:'Click on me!' } this.someAsynchronusRequest = this.someAsynchronusRequest.bind(this); } someAsynchronusRequest(){ return new Promise((resolve, reject) => { setTimeout(() => { this.setState({ color:'blue', innerText:'requested completed,it should be blue?' }, () => { resolve() }) },1000) }) } render(){ return( <div onClick={this.renderBox.bind(this)} className="box click"> <div>{this.state.innerText}</div> </div> ) } renderBox(){ this.someAsynchronusRequest() .then(resolve => { ReactDOM.render(<Component2 color={this.state.color}/>,document.getElementById('component2')) }) } } class Component2 extends React.Component { constructor(props){ super(props) } render(){ return( <div style={{backgroundColor:this.props.color}} className="red box"> </div> ) } } ReactDOM.render(<Component1 />, document.getElementById('component1')) 

 .click { text-align:center; border:1px solid black; } .box { width:100px; height:100px; margin:10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="component1"> </div> <div id="component2"> </div> 

我在someAsynchronusRequest方法中添加了一个Promise。 注意，由于它是异步的，因此我在setState的回调函数中解决了它。

问题在于您要在调用超时内部函数之前渲染Component2，从而不使用蓝色渲染新组件（此时尚未更改）。 它们渲染Component2的方式（使用ReactDOM）并不是React的惯用方式。 相反，您应该像这样在Component1的渲染功能内渲染Component2。 这将自动解决异步问题，您可以删除promise：

render(){
    return(

    <div onClick={this.renderBox.bind(this)} className="box click">
      <div>{this.state.innerText}</div>
      <Component2 color={this.state.color}/>
    </div>

    )

通常，您只想使用ReactDOM.render（）渲染根组件，并将其附加到页面上的某些div上。 其余的应使用组件的渲染功能进行渲染。