ReactJS:通过props改变父节点的子节点状态

ReactJS: Mutating child state from parent via props

本文关键字：子节点 状态 父节点 改变 通过 props ReactJS      更新时间：2023-09-26

免责声明:我看了一下Reactjs:如何修改父级的子状态或道具?不要相信你的回答符合我的问题。

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

TL;DR -我应该如何改变父组件的子组件状态，如果有的话，还有什么其他选择?

孩子:

export default class Conversation extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      newConversation: props.showNewConversation
    };
  }
  
  render() {
   if (!this.state.newConversation) {
    return (
      <div>Current Conversation</div>
    );
   } return (
      <div>New Conversation</div>
    );
  }
}

现在我需要渲染这个组件在不同的地方，但我需要渲染适当的DOM依赖于父，即从导航栏你可以创建一个新的对话，从用户页面你可以直接去你的对话与他们，所以我可以控制当我通过它的prop调用子。

通过prop调用子节点并设置状态:

<Conversation
  showNewConversation={this.state.isConversationShown === true}
/>

这是目前的工作，但我被告知这是一个非常糟糕的做法在React中，我的问题是为什么这被认为是不好的做法，一个好的实践解决方案应该是什么样子的。

在React中，一般的最佳实践是使尽可能多的组件'无状态'。通常，如果不加载异步数据或接受用户输入，则不需要state。

在这个例子中，主要问题发生如下:如果父元素呈现

<Conversation newConversation={true} />
然后渲染到 
<Conversation newConversation={false} />

那么子会话将不会像预期的那样呈现，因为React会"更新"子会话(重新呈现)，但不会再次调用构造函数。因为你只是在构造函数中把props转移到了状态，所以子元素永远不会改变。

相反，大多数组件应该只作为其属性的函数来呈现。您的孩子可以适应以下情况:

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()函数中引用了这些道具。

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

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

那么Conversation组件就可以在render()方法中直接访问这些道具。

如果你绝对必须改变状态，那么它应该以父类在props中改变的形式出现:

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>
    );
  }
}
相关文章：