当父组件状态改变时，如何强制子组件重新呈现

React - How do i force child components to re render when parent state component changes?

本文关键字：组件 何强制 新呈现 状态 改变      更新时间：2023-09-26

in my pen http://codepen.io/seunlanlege/pen/PbYNor?editors=0010#0

发生的事情很简单。当this.send()方法被调用时。this.state.chat发送给子组件<Messages /> which is then concatenated to the这个状态。

但事情是，渲染后1秒我更新this.state.sent，这是<Messages />的一个道具，但消息组件不重新渲染。

请问我如何强制它重新渲染?

class Messages extends React.Component{
constructor(props){
super(props);
}
render(){
return(
`<p id={this.props.key} className={this.props.style}>{this.props.msg}<span>{this.props.sent}</span></p>`);
}
}

class Chat extends React.Component {
constructor(props) {
super(props);
this.count = 0;
    this.state = {chat :'',messages:[],sent:[]}; 
}
chatChange(event){
    this.setState({chat : event.target.value});
}
send(e){
    e.preventDefault();
    let x = this.state.messages;
    this.setState({messages:x.concat([<Messages style="me" msg={this.state.chat} key={this.state.chat} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} />])});
this.setState({chat:''});
setTimeout(()=>{
  this.setState({sent:this.state.sent.concat(['sent'])});
  this.count++;
},1000);
}
render () {
    return(
        `<div>
        <div id="top"><h1>Chat With Customer Support</h1></div>
        <div id="chatbox">
        {this.state.messages}
        </div>
        <div id="bottom">
        <form onSubmit={this.send.bind(this)}>
        <span>
        <input value={this.state.chat} type="text" onChange={this.chatChange.bind(this)} id="chat" value={this.state.chat} />
        <button type="submit" id="send">Send</button>
        </span>
        </form>
        </div>
        </div>`
        );
}
}ReactDOM.render(<Chat name="seun" />,document.getElementById('app')):</code>

你的代码几乎没问题，唯一你错过的是消息组件的适当键，

让react正确地呈现组件每个组件应该有不同的键，所以我从

更改了这段代码
<Messages style="me" msg={this.state.chat} key={this.state.chat} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} />


<Messages style="me" msg={this.state.chat} key={this.count} sent={(this.state.sent[this.count])?this.state.sent[this.count]:''} />

和code-pen工作正常

编辑这就解决了问题

不是将组件保存为状态，而是动态地构建它们。io/abhirathore2006/pen/JbjjPx

将此作为组件的键

 this.state.messages.length

React不允许你用相同的键输入两个元素。这就是react的虚拟DOM如何区别rerender

的变化。

componentWillReceiveProps应该取nextProps.

每当整个组件呈现时，React都会用之前的状态/键匹配所有组件。所以如果你在每次父渲染时给子渲染一个唯一的key，子渲染也会重新渲染。

Lodash提供了一个函数_.uniqueId()，每次调用它都会生成一个唯一的id。

<Parent>
    <Child key={_.uniqueId('child_component')} />
</Parent>
相关文章：