2
私のペンhttp://codepen.io/seunlanlege/pen/PbYNor?editors=0010#0React - 親状態コンポーネントが変更されたときに子コンポーネントを強制的に再レンダリングするにはどうすればよいですか？
何が起こっているかはかなり簡単です。 this.send()メソッドが呼び出されたとき。 this.state.chatは子コンポーネント<Messages /> which is then concatenated to the this.state.messages`配列に送られ、レンダリングされます。
しかし、事実は、<Messages />の小道である私は更新this.state.sentをレンダリングした後1秒ですが、メッセージコンポーネントは再レンダリングされません。
どうすれば再レンダリングするのですか？
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>
メッセージボックスは実際にここで問題をアップデートしています。同じテキストを送信すると、cozは更新されません。Reactは、変更を仮想DOMの既存の要素のメッセージ。あなたがすべきことは、各メッセージにIDを追加することです。 – Pavan