如何在 React 中从另一个组件设置一个组件的状态答案

【问题标题】：How to set one component's state from another component in React如何在 React 中从另一个组件设置一个组件的状态
【发布时间】：2020-10-03 12:44:09
【问题描述】：

假设我有以下名为 Home 的组件：

this.state = {
    posts: []
}
componentDidMount() {
    ... data is fetched from api
}

<div
    <PostForm />
    {this.state.posts.map(post => (
     <Post key={post.id} post={post} />
    ))}
</div>

PostForm 组件提交新的 Post 后，如何更新 Home 的状态，或者从 api 重新获取数据。

【问题讨论】：

标签： reactjs

【解决方案1】：

欢迎来到 SO！

从子级设置父级状态：

如果您希望您的子组件能够访问您的父组件的状态，只需将setState() 作为您的父类中的道具传递，就像这样......

<PostForm
    setParentState={(state) => this.setState(state)}
/>

然后，稍后在PostForm.js，只需像这样设置父状态......

this.props.setParentState(newParentStateObject);

或者，你甚至可以这样做......

<PostForm
    postform={this}
/>

稍后，您可以使用this.props.postform.anyFunctionEver() 调用任何邮件。

从父级设置子级状态：

假设您现在想做相反的事情：从父组件更新子组件的状态？一样简单，在定义<PostForm/>时设置引用...

<PostForm
    ref={(instance) => {this.postform = instance}}
/>

然后你可以直接在你的父类中设置postform的状态...

this.postform.setState(newChildStateObject);

状态可能会发生很多事情，所以如果您不确定，请尝试创建testFunc() {console.log('test');}，然后尝试在父子之间传递/激活它。

【讨论】：