时间戳

首页 > 解决方案 > 有条件地包装来自孙子的 React Parent

reactjs - 有条件地包装来自孙子的 React Parent

问题描述

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

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

我有哪些选择？

标签： reactjsnext.js

解决方案

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

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

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

推荐阅读