CustomEvents 和 React.js 组件

【问题标题】：CustomEvents and React.js ComponentsCustomEvents 和 React.js 组件
【发布时间】：2019-07-12 20:59:11
【问题描述】：

在 React 的嵌套组件树中，如果您希望子组件影响父组件中的状态，则传递绑定回调。

React 是否支持监听来自深度嵌套组件的事件？现在，如果我有一个深度为 5 个组件的组件树，我需要通过每个组件传递 prop 回调，这是明确且好的，但有些不灵活。

【问题讨论】：

【解决方案1】：

你绝对应该看看 React Context。简单地说，它是一个 State 或一个 Reducer（如果你将它与 useReducer hook 一起使用），你可以与深度嵌套的孩子共享，而无需将其作为道具传递。

const SomeContext = createContext();

<SomeContext.Provider value={useReduce(reducerFunction, initialState)}>
// children
</SomeContext.Provider>

然后在链条的某个地方，您可以像下面这样使用它

<SomeContext.Consumer>
{value => <ChildComponent value={value}>}
</SomeContext.Consumer>

所以你不需要把这个值作为 props 传递，你唯一需要做的就是从你创建它的文件中导入这个 SomeContext 。这是部分伪代码，但它反映了这个想法

【讨论】：