Question

在React中，我有一个具有三个同级组件的父组件，例如：

  void _loadFile() async {
    String data = await rootBundle.loadString('assets/myfile.txt');
    LineSplitter.split(data).forEach((line) => print('$line'));
  }

我想从<div> <Component1/> <Component2/> <Buttons/> </div>组件触发在<Component1/>和<Component2/>中定义的函数。目前，我正在将<Buttons/>与useImperativeHandle结合使用，以从forwardRef和<Component1/>导出函数，并将它们通过<Component2/>传递给<Buttons/>组件。

它可以工作，但这似乎不是最好的方法。如果我不想将props和<Component1/>函数和状态处理移到父组件，推荐的React模式会这样做吗？

Answer 1

我本来建议将状态移到父级，但是由于您不想这样做，因此可以使用带有钩子的上下文

创建上下文

export const AppContext = React.createContext();

在需要的地方使用它（先导入上下文并先使用useContext）

const {state, dispatch} = useContext(AppContext);

官方文档：https://reactjs.org/docs/hooks-reference.html#usecontext

如何从React中的另一个兄弟组件触发兄弟组件功能？

1 个答案: