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方法将填充消息对象。

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

Answer 1

您只需将父级状态作为道具传递给子级。更新父级状态后，将执行render()功能，并自动更新子级道具，并依次触发重新渲染。

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

它们将作为this.props.messages在子组件中可用。

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

1 个答案: