组件之间的依赖类型将定义最佳方法。

例如，如果您计划拥有一个中央存储，redux 是一个不错的选择。然而，其他方法也是可能的：

• 父母对孩子

  1. props
  2. 实例方法

• 孩子对父母

  1. 回调函数
  2. 事件冒泡

• 兄妹对兄妹

  1. 父组件

• 任何对任何

  1. 观察者模式
  2. 全局变量
  3. 语境

请在此处找到有关每种方法的更多详细信息

您想要的是实现一些存储您的状态的对象，可以使用回调函数对其进行修改。然后你可以将这些函数传递给你的 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。

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

React Docs：“组件之间的通信”

对于没有父子关系的两个组件之间的通信，您可以设置自己的全局事件系统。在 componentDidMount() 中订阅事件，在 componentWillUnmount() 中取消订阅，并在收到事件时调用 setState()。通量模式是一种可能的安排方式。

在多个组件之间使用共享状态而不将应用程序的代码重写到某个状态管理系统的最简单方法是use-between钩子。

在代码沙盒中试试这个例子

import React, { useState } from "react";
import { useBetween } from "use-between";

// Make a custom hook with your future shared state
const useFormState = () => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  return {
    username, setUsername, email, setEmail
  };
};

// Make a custom hook for sharing your form state between any components
const useSharedFormState = () => useBetween(useFormState);

const ComponentA = () => {
  // Use the shared hook!
  const { username, setUsername } = useSharedFormState();
  return (
    <p>
      Username: <input value={username} onChange={(ev) => setUsername(ev.target.value)} />
    </p>
  );
};

const ComponentB = () => {
  // Use  the shared hook!
  const { email, setEmail } = useSharedFormState();
  return (
    <p>
      Email: <input value={email} onChange={(ev) => setEmail(ev.target.value)} />
    </p>
  );
};

const ComponentC = () => {
  // Use shared hook!
  const { email, username } = useSharedFormState();
  return (
    <p>
      Username: {username} <br />
      Email: {email}
    </p>
  );
};

export const App = () => (
  <>
    <ComponentA />
    <ComponentB />
    <ComponentC />
  </>
);

• 首先，我们创建useFormState自定义钩子作为我们状态的来源。
• 在下一步中，我们创建在内部useSharedFormState使用useBetween钩子的钩子。该钩子可用于任何可以读取或更新共享状态的组件！
• 最后一步是useSharedFormState在我们的组件中使用。

useBetween是一种调用任何钩子的方法。但是这样状态就不会存储在 React 组件中。对于同一个钩子，调用的结果是一样的。所以我们可以在不同的组件中调用一个钩子并在一种状态上协同工作。当更新共享状态时，使用它的每个组件也将被更新。

您可以设置父子关系，然后可以将数据作为props传递给子组件。

否则，如果您想在与任何一个（父/子）无关的 2 个组件之间创建交互，您可以检查通量或更好的redux。

我会说你应该使用 redux。看这里为什么

您可以构建自定义 React 钩子以state在组件之间共享一个，我在这里做了一个。您可以通过下载use-linked-state.js文件来使用它。

导入useStateGatewayhook 后，在父组件中声明网关并将其传递给您的子组件

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共享对象是有效的。

通过这种方式，您可以组合组件并在它们之间建立连接以相互通信。