Question

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

<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)

我有什么选择？

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>}
  )
}

有条件地包装来自孙子的React父母

2 个答案: