Javascript ReactJS：通过道具从父级变异子级状态

免责声明：我已经看过，不相信答案符合我的问题

因此，我有一个可重用的、有状态的对话组件，它根据状态呈现不同的DOM。我还必须能够控制从父级渲染哪个DOM

TL；DR-我应该如何从父组件状态改变子组件状态，如果有，还有什么其他选项

孩子：

导出默认类会话扩展组件{
建造师（道具）{
超级（道具）；
此.state={
newConversation:props.showNewConversation
};
}
render（）{
if（！this.state.newConversation）{
返回(
当前对话
);
}返回(
新对话
);
}
}

在React中，一般的最佳做法是尽可能减少组件的“状态”。通常，如果您不加载异步数据或接受用户输入，则不需要状态

在本例中，主要问题如下：如果父级渲染

<Conversation newConversation={true} />

然后再把它重新发布到

<Conversation newConversation={false} />

然后子对象将不会按预期呈现，因为React将“更新”子对象对话（重新呈现），但不会再次调用构造函数。因为您只将道具转移到构造函数中的状态，所以子级永远不会更改

相反，大多数组件应仅作为其属性的函数进行渲染。您的孩子可以适应以下条件：

export default class Conversation extends Component {
  constructor(props) {
    super(props);
  }

  render() {
   if (!this.props.newConversation) {
    return (
      <div>Current Conversation</div>
    );
   } return (
      <div>New Conversation</div>
    );
  }
}

导出默认类会话扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
如果（！this.props.newConversation）{
返回(
当前对话
);
}返回(
新对话
);
}
}

在这里，父级的更新将允许子级正确地重新渲染，因为您直接引用子级的render（）函数中的道具

如果您有更多关于正在呈现的对话的数据，那么您应该将所有数据作为道具传入。i、 e

<Conversation conversationData={{name: 'abc', new: false}} />

然后对话组件可以在render（）方法中直接访问道具

如果您必须更改状态，则家长应以更改道具的形式：

export default class Conversation extends Component {
  constructor(props) {
    super(props);

    this.state = {
      newConversation: props.showNewConversation
    };
  }

  // Response to change
  componentWillReceiveProps(nextProps){
      this.setState({newConversation: this.props.showNewConversation});

  }

  render() {
   if (!this.state.newConversation) {
    return (
      <div>Current Conversation</div>
    );
   } return (
      <div>New Conversation</div>
    );
  }
}

导出默认类会话扩展组件{
建造师（道具）{
超级（道具）；
此.state={
newConversation:props.showNewConversation
};
}
//对变化的反应
组件将接收道具（下一步）{
this.setState（{newConversation:this.props.showNewConversation}）；
}
render（）{
if（！this.state.newConversation）{
返回(
当前对话
);
}返回(
新对话
);
}
}

为什么这对于通过

道具从所有者到所有者组件的数据流来说是一种非常糟糕的做法？回答得真棒！把它带出州外，只是作为谈话的道具，效果不错，而且更干净。谢谢！