親の反応が誘発されたイベントで子供にデータを渡す

Question

私はこのように質問に反応します。

私はbuttonを持つ親コンポーネントを持っています。これは私のコードで、

class MyPage extends React.Component{ 

    constructor(props){ 
    super(props); 
    this.state = { messages: []}; 
    this.onRefreshClick = this.onRefreshClick.bind(this); 
    } 

    componentWillMount() { 

    ...... 
    } 

    onRefreshClick(){ 
    event.preventDefault(); 
    console.log("Refresh clicked !!!"); 
    fetchMessages(fetch_url + "/" + this.state.user.id).then((res) => { 
     this.setState({messages: res}); 
     console.log(this.state.messages); 

    });//end of outer promise 
    } 

    render(){ 
    return(
     <div> 
     <div className="col-md-2 left-pane"> 
      <div className="col-md-2 header-left-block"> 
      <button className="btn refresh-btn" onClick={this.onRefreshClick} type="submit">Refresh</button> 
      </div> 
     </div> 
     <div className="col-md-8 middle-pane"> 
      <ReceivedImages /> 
     </div> 

     </div> 

    ); 
    } 

} 

メッセージは、オブジェクトの更新ボタンを親にクリックされたときの方法onRefreshClickによって移入なっています。

このデータを子コンポーネントに渡したい場合は、<ReceivedImages />をpropsとして渡し、親のボタンをクリックしたときにそのデータをロードします。どうすればいいの？ コールバックを使用して、リフレッシュボタンが<ReceivedImages />コンポーネント内にある場合、この動作をシミュレートするのは簡単ですが、この場合はどのように行いますか？

Answer 1

簡単に子どもたちに親の状態を小道具として渡すことができます。親の状態が更新されると、render()機能が実行され、子どもの小道具が自動的に更新され、子小道具が順番に再レンダリングされます。

<ReceivedImages messages={this.state.messages} /> 

これらは子コンポーネントでthis.props.messagesとして利用できるようになります。