Question

我正在更新TalkContent的状态消息和 id ，我正试图将其传递给Talks的适当子女（这本身就是TalkContent的孩子。

TalkContent

class TalkContent extends React.Component{
  constructor(props){
    super(props)
    this.state = { talks : [], id : -1, messages : []};

    //
  }

  render(){
    if (this.state.id === -1)
    {
      return(
        <div className="TalksList">
            <Talks talks={this.state.talks} onTalkClick={this.onTalkClick} messages={this.state.messages} talkId={this.state.id} />
            //
        </div>
      )
    }

会谈

class Talks extends React.Component{

  render(){
    const talks = this.props.talks.map((talk, i) => {
      return (
        <Talk
          key={i}
          id={i}
          talk={talk.talk}
          username={talk.username}
          date={talk.date}
          onTalkClick={this.props.onTalkClick}
          messages={this.props.messages}
          talkId={this.props.talkId}
           />
      )
    });

    return(
      <div className="talkList">
        {talks}
      </div>

    )
  } //render
}

对话

class Talk extends React.Component{
  constructor(props){
    super(props);
    this.state = { messages : []};

    this.handleClick = this.handleClick.bind(this);
  }

  render(){
    return(
      <div>
        {this.props.username} : <span onClick={this.handleClick}>{this.props.talk}</span> {moment(this.props.date).fromNow()}
      </div>
    )
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.id === this.nextProps.talkId){
      this.setState({messages: nextProps.messages});
    }
  }

但是，即使更新TalkContent（父组件）的状态消息和 id ，Talk的函数 componentWillReceiveProps 也是如此在任何一个孩子中被解雇了。有人可以告诉我有什么问题吗？

Answer 1

我已经快速制作了一个代码沙箱，它显示了父组件如何与子组件通信。如果您打开开发人员工具＆gt;在控制台中，您可以看到从父组件和子组件更新的道具。希望它有帮助，随时提出任何问题。

Example for Mit

Answer 2

根据discussion。似乎道具值在父级别（TalkContent组件）中被更改，并且道具更改预计将通过componentWillReceiveProps函数在Grand Child组件（Talk组件）中触发。

如果在父组件中更改了props，则

componentWillReceiveProps通常会在子组件中触发。因此，确保实现componentWillReceiveProps功能应仅在父子层次结构中发生

Answer 3

如果更改了this.props，则React不会自动重新呈现组件会话，您需要使用this.forceUpdate()手动触发重新呈现，或者通过设置状态并更新它。

componentWillReceiveProps未被调用

3 个答案: