栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在两个React组件之间建立共享状态?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在两个React组件之间建立共享状态?

您想要实现一个存储状态的对象,可以使用回调函数对其进行修改。然后,您可以将这些函数传递给React组件。

例如,您可以创建一个商店:

function Store(initialState = {}) {  this.state = initialState;}Store.prototype.mergeState = function(partialState) {  Object.assign(this.state, partialState);};var myStore = new Store();ReactDOM.render(  <FirstComponent mergeState={myStore.mergeState.bind(myStore)} />,  firstElement  );ReactDOM.render(  <SecondComponent mergeState={myStore.mergeState.bind(myStore)} />,  secondElement  );

现在,

FirstComponent
SecondComponent
实例都可以调用
this.props.mergeState({ . ..})
以将状态分配给同一存储。

Store.prototype.getState
作为练习留给读者。

请注意,您始终可以将store(

myStore
)本身传递给组件;这样做反而会减少反应。

以下是一些您可能会感兴趣的文档:

React Docs:“组件之间通信”

要在没有父子关系的两个组件之间进行通信,可以设置自己的全局事件系统。订阅componentDidMount()中的事件,取消订阅componentWillUnmount()中的事件,并在收到事件时调用setState()。助焊剂模式是解决此问题的一种可能方法。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/448880.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号