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

我对这个问题的反应是全新的

我有一个父组件，它有一个

按钮

。这是我的密码

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>

    );
  }

}

类MyPage扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={messages:[]}；
this.onRefreshClick=this.onRefreshClick.bind（this）；
}
组件willmount（）{
......
}
onRefreshClick（）{
event.preventDefault（）；
日志（“刷新点击！！！”；
fetchMessages（fetch_url+“/”+this.state.user.id）。然后（（res）=>{
this.setState（{messages:res}）；
console.log（this.state.messages）；
})；//外部承诺的结束
}
render（）{
返回(
刷新
);
}
}

当在父对象上单击刷新按钮时，messages对象将由onRefreshClick方法填充

我想将此数据作为道具传递给子组件，

，并在单击父组件上的按钮时加载它们。我该怎么做呢。

---

如果“刷新”按钮位于

组件内，则可以通过使用回调来模拟此行为，但在这种情况下，我该如何操作？

您可以简单地将父级状态作为道具传递给子级。更新父级的状态时，将执行

render（）

函数，并自动更新子级的道具，从而触发它们的重新渲染

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

---

它们将作为

this.props.messages

作为道具传递消息状态在子组件中可用？