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

Posted 2023-02-21

【中文标题】如何在 React 中从另一个组件设置一个组件的状态

【英文标题】：How to set one component's state from another component in 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 重新获取数据。

【参考方案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');，然后尝试在父子之间传递/激活它。