我有一个像这样的应用程序：
<App>
<Child_A>
<Child_A_A />
</Child_A>
</App>
在Child_A_A级别，我希望通过包装如下这样的App来影响整个Dom：
<ViewPortSettings>
<App>
<Child_A>
<Child_A_A />
</Child_A>
</App>
</ViewPortSettings>
因此，基本上，我希望某种变量或钩子影响整个应用是否被包装：
// Child_A_A.js
global.useViewport(true)
我有什么选择？
一个简单的解决方案是创建两个版本，您可以将它们分成单独的组件，然后有条件地进行创建：
{condition && <ViewPortSettings>
<App>
<Child_A>
<Child_A_A />
</Child_A>
</App>
</ViewPortSettings>}
{!condition && <App>
<Child_A>
<Child_A_A />
</Child_A>
</App>}
据我所知，您必须使用useReducer，以防用react的核心解决。我认为context或其他任何方式均不适合此操作。
在您的Child_A_A组件中，分配操作：
const [state,dispatch] = useReducer(reducer,initialState);
// dispatch somewhere in your component
dispatch({type: 'wrap'})
在您的主要组件中，检查调度的操作：
const initialState = {show: false};
// Reducer
function reducer(state,action) {
switch (action.type) {
case 'wrap':
return {show: true};
default:
throw new Error();
}
}
// your main component:
function Main() {
const [state] = useReducer(reducer,initialState);
return (
{state.show && <ViewPortSettings>}
<App>
<Child_A>
<Child_A_A />
</Child_A>
</App>
{state.show && </ViewPortSettings>}
)
}