未调用componentWillReceiveProps

Question

我正在更新状态消息和TalkContent的ID ，并试图将其传递给适当的Talks子代（它本身是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

我已经快速创建了一个代码沙箱，该代码沙箱显示了父组件如何与子组件进行对话。 如果打开“开发人员工具”>“控制台”，则可以同时看到“父级”和“子级”组件的道具更新。 希望对您有所帮助，并随时提出任何问题。

Mit的例子

Answer 2

根据讨论 。 似乎props值在父级别（TalkContent Component）中已更改，并且props更改有望通过componentWillReceiveProps函数在Grand Child Component（Talk Component）中触发。

componentWillReceiveProps得到正常的子组件中烧，如果这个道具在父组件改变。 因此，请确保仅在父子层次结构内执行componentWillReceiveProps函数

Answer 3

React不会自动重新渲染组件如果更改了this.props ，Talks，您需要使用this.forceUpdate()或在其上设置状态并更新它来手动触发重新渲染。