如何在两个组件之间创建一般条件 react?

组件之间的关系类型确定了最佳方法。

例如，如果您计划拥有中央商店，则重复良好的选择。 但是，其他方法是可能的：

从父母到孩子

道具

实例方法


从孩子到父母

反向呼叫功能

弹出事件


兄弟姐妹

父组件


任何人都有任何人

模板 Observer

全局变量

语境


更多的
https://www.javascriptstuff.co ... ttern

您希望实现一些物体，该对象存储可以使用回调功能更改的条件。 然后，您可以将这些功能传递给您的组件。 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/}"></firstcomponent>,

 firstElement

 /;

ReactDOM.render/

 <secondcomponent mergestate="{myStore.mergeState.bind/myStore/}"></secondcomponent>,

 secondElement

 /;

现在都是副本

FirstComponent

和

SecondComponent

可能会导致

this.props.mergeState/{ . . .}/

将状态分配给相同的存储库。

我走了

Store.prototype.getState

作为读者的练习。

请注意，您可以随时通过商店本身。 /

myStore

/ 成分; 他才感觉不那么反应。

以下是一些可能感兴趣的文件：

https://facebook.github.io/rea ... .html
用于两个没有的组件之间的通信
关系 "父母后代", 您可以自定义自己的全球
事件制度。 订阅事件 componentDidMount//, 邮避B.
componentWillUnmount//, 并打电话 setState//, 当你开始一个活动。
流动模式是组织它的可能方法之一。

或者您可以配置孩子父级的态度，然后将数据传输到子公司组件作为详细信息。

否则，如果要在介于之间创建交互 2 与之无关的组件 either/parent/child/, 你可以检查
https://facebook.github.io/flux/
, 甚至更好
http://redux.js.org/
.

我会说你必须和 redux.
https://www.quora.com/Should-I ... actJS

您可以创建自定义钩子。 React 共享的

state

在组件之间，我做了一个
https://github.com/makannew/us ... te.js
. 您可以通过下载文件来使用它。

use-linked-state.js

.

导入钩子后

useStateGateway

检查父组件中的网关并将其传输到其子组件。

import {useStateGateway} from "use-linked-state";

const myGateway = useStateGateway/{partA:null, partB:null}/;

return /

 <>

 <componenta gateway="{myGateway}">

<componentb gateway="{myGateway}">

<componentpost gateway="{myGateway}">

 

 /

然后，您可以使用自定义钩访问这三个组件之间的一般状态。 useLinkedState

import { useLinkedState } from "use-linked-state";



export default function ComponentA/{gateway}/{



 const [state, setState] = useLinkedState/gateway/;



 <your logic="">



}

在你的逻辑中

ComponentA

和

ComponentB

将对您的整体对象中的部分负责

{partA:"filled by ComponentA", partB:"filled by componentB"}

.
最后，

ComponentPost

出版结果如果

partA

和

partB

公共设施有效。

因此，您可以制作组件并在它们之间建立一个链接以彼此交换。
</your></componentpost></componentb></componenta>