Гнездо компонентов из массива

Question

Я сделал специальную операцию с контейнером, упаковывающим компонент с поставщиком контейнера:

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

что я использую вот так:

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

Я хотел бы сделать аналогичный случай с контейнерами, использующими не один контейнер, а массив контейнеров:

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;