Question

我一直在研究HOC的概念，但我不确定如何在没有丑陋的深层嵌套的情况下拥有多个。

例如，如果我想添加一个库的HOC，如Redux提供者或Apollo提供者，那么就拥有我自己的HOC等等。如下所示，这不仅非常低效和丑陋吗？

（只是一个例子，目前并没有实际使用这个。所有的理论。）

ReactDOM.render(
    <ApolloProvider client={ client }>
        <ReduxProvider state={ state }>
            <MyHOC xyz={ abc }>
                <App />
            </MyHOC>
        </ReduxProvider>
    </ApolloProvider>,
    document.getElementById('root')
)

与

相比

ReactDOM.render(
    <CombinedHOCs client={ client } state={ state } xyz={ abc }>
        <App />
    </CombinedHOCs>,
    document.getElementById('root')
)

但我能想到的唯一方法就是循环使用提供的HOC，它们仍然需要循环（例如映射）所有内容（取决于HOC的作用）。

所以，我是以错误的方式看待这个，还是没有办法避免这种情况，假设给定组件需要那些HOC？

Answer 1

我认为像在示例中那样嵌套HOC是可以的。但是如果你使用redux和Apollo，你应该integrate它并将数据保存在一个商店中。你将摆脱一个嵌套，这将让你更好地跟踪你的应用程序中发生的不同事件。

ReactDOM.render(
    <ApolloProvider store={store} client={client}>
      <MyHOC xyz={abc}>
        <App />
      </MyHOC>
    </ApolloProvider>,
    document.getElementById('root')
)

如何组合/组合多个高阶组件（react.js）？

1 个答案: