Question

我正在尝试创建一个可以有条件地渲染孙子孙，甚至可能在React中嵌套更多子孙的HOC。

<HOC>
  <Child>
    <Grandchild1/>
    <Grandchild2/>
  </Child>
</HOC>

例如，在此示例中，HOC内部的一些逻辑决定不应渲染Grandchild1。得到这个结果很容易：

<HOC>
  <Grandchild2/>
</HOC>

但是正如您所看到的，这也会跳过Child组件。但是，我想要的结果是这样的：

<HOC>
  <Child>
    <Grandchild2/>
  </Child>
</HOC>

我不想向Child组件添加任何逻辑，我希望所有逻辑都在HOC中。这可能吗？

Answer 1

是的..

像这样的逻辑通常可以在React外部更好地处理，Redux是一个受欢迎的选择。

但是React中有一个叫做Context的东西，它确实意味着诸如主题之类的东西，但是也可以仅用于将prop /状态传递到React的树下。

https://reactjs.org/docs/context.html

示例..下面有一个<Parent><Ignored><Child>，孩子可以得到<Parent>存储的值。 IOW：属性/值已从Parent传递到Child，绕过了Ignored。

ps。下面的示例是React Hooks。.

const {useContext, createContext} = React;

const ParentContext = createContext();

function Child() {
  const parentValue = useContext(ParentContext);
  return <div>Child -> parent value = {parentValue}</div>;
}

function Ignored() {
  return <div><b>ignored</b><Child/></div>
}

function Parent() {
  return <ParentContext.Provider value={"value from parent"}>This is the parent..
    <Ignored/>
  </ParentContext.Provider>;
}


ReactDOM.render(<React.Fragment>
  <Parent/>
</React.Fragment>, document.querySelector('#mount'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="mount"></div>

是否有可能使用HOC的逻辑有条件地渲染子孙？

1 个答案: