嵌套数组中的组件

Question

我创建了一个用容器的提供者包装组件的即席withContainer：

const withContainer = Container => Component => _ =>
<Container.Provider>
    <Component />
</Container.Provider>

我是这样使用的：

const MyContainer = createContainer(useState) // from unstated-next
const MyProvidedComponent = withContainer(MyContainer)(MyComponent)

我想做一个类似的即席withContainers，不是一个容器，而是一个容器数组：

withContainer([C1, C2, C3])(MyComponent) //C1,C2,C3 being containers

这将返回类似如下的内容：

<C1.Provider>
  <C2.Provider>
    <C3.Provider>
      <MyComponent />
    </C1.Provider>
  </C2.Provider>
</C3.Provider>

Answer 1

您需要从内到外包装MyComponent：

var components = [C1, C2, C3]; // or [C1, C2, C3].map(c=>c.Provider) if components are contexts

let result = <MyComponent/>;

for (const Component of components.slice().reverse()) {
    result = (
        <Component>
            {result}
        </Component>
    );    
}
return result;