reactjs - 如何在同一级别的组件之间传递东西？

Question

我有一个 React 应用程序的形式:

<App>
  <ParentComponent>
    <FormComponent>
    <AnotherComponent>
  </ParentComponent>
</App>

我希望能够更新 <FormComponent> 的一些状态值通过单击 <AnotherComponent> 中的元素.

我不想将它们放在一起，而是让它们并排放置。我不想举起<FormComponent>状态，因为它被很好地封装了。

实现此目标的最佳方法是什么？我可以只用 React 来完成还是我需要 RxJS/其他东西？

Answer 1

React 中的数据 Flows Down .

如果你不想lift the state up ，剩下的就是Context API或任何状态管理库，如 Redux 和 MobX(两者都使用不同的策略实现 Context API)。

但是，状态仍然在“上方”FormComponent(你仍然提升状态)。

const Context = React.createContext();

const ParentComponent = () => {
  const contextState = useState(DEFAULT_STATE);
  return (
    <Context.Provider value={contextState}>
      <FormComponent />
      <AnotherComponent />
    </Context.Provider>
  );
};

const FormComponent = () => {
  const [, setState] = useContext(Context);
  // use setState
};

const AnotherComponent = () => {
  const [state] = useContext(Context);
  // valid state updated from FormComponent
};