条件性包装反应父代与孙代

Question

我有一个这样的应用程序：

<App>
<Child_A>
<Child_A_A />
</Child_A>
</App>

在Child_A_A的级别上，我想通过能够像这样包装应用程序来影响整个Dom：

<ViewPortSettings>
<App>
<Child_A>
<Child_A_A />
</Child_A>
</App>
</ViewPortSettings>

因此，基本上我想要某种变量或钩子来影响整个应用程序是否被包装：

// Child_A_A.js
global.useViewport(true)

我有什么选择？

Answer 1

一个简单的解决方案是创建两个版本，您可以将它们制作成单独的组件，然后有条件地制作：

{condition && <ViewPortSettings>
<App>
<Child_A>
<Child_A_A />
</Child_A>
</App>
</ViewPortSettings>}

{!condition && <App>
<Child_A>
<Child_A_A />
</Child_A>
</App>}

Answer 2

据我所知，您必须使用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>}
)
}