[英]React - How do i force child components to re render when parent state component changes?
在我的笔http://codepen.io/seunlanlege/pen/PbYNor?editors=0010#0
发生的事情非常简单。 当this.send()
方法时。 this.state.chat
被发送到子组件<Messages /> which is then concatenated to the
this.state.messages`数组并进行渲染。
但问题是,渲染后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>
你的codepen很好,只有你错过的是消息组件的正确密钥,
为了正确地渲染组件,每个组件应该有不同的密钥,所以我改变了一段代码
<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]:''} />
和代码笔工作正常
编辑这解决了问题
而不是将组件保存到状态,动态构建它们。 检查这个codepen.io/abhirathore2006/pen/JbjjPx
将其用作组件的键
this.state.messages.length
React不允许您输入具有相同键的两个元素。 这就是反应虚拟DOM如何在重新渲染时区分更改
componentWillReceiveProps应该使用nextProps。
每当整个组件重新渲染时,React会将所有组件与先前的状态/键匹配。 因此,如果您在父母每次重新渲染时给孩子一个唯一的钥匙,孩子也会重新渲染。
Lodash提供了一个函数_.uniqueId() ,每次调用它时都会生成一个唯一的id。
<Parent>
<Child key={_.uniqueId('child_component')} />
</Parent>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.