在React中的父级中触发的事件上将数据向下传递给子级

Question

我是React的新手，因此是个问题。

我有一个带有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方法填充message对象。

我想将此数据作为道具传递给子组件<ReceivedImages />并在单击父项上的按钮时加载它们。 我该怎么做呢。 如果刷新按钮位于<ReceivedImages />组件内部，则可以通过回调来模拟这种行为，但是在这种情况下我该怎么做？

Answer 1

您可以简单地将父母的状态作为道具传递给孩子 。 当父母的状态更新时，将执行render()函数，儿童的道具将自动更新，从而依次触发它们的重新渲染。

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

它们将在子组件中以this.props.messages 。