Лучший способ обернуть компоненты с несколькими контекстами

Question

В основном моя проблема в том, что если в вашем приложении много контекста, ваше приложение может выглядеть следующим образом

<ContextOne.Provider value={contextOneVal}>

  <ContextTwo.Provider value={contextTwoVal}>

    <ContextThree.Provider value={contextThreeVal}>

      <ContextFour.Provider value={contextFourVal}>

         <div>App Here</div>

      </ContextFour.Provider>

    </ContextThree.Provider>

  </ContextTwo.Provider>

</ContextOne.Provider>

Есть ли лучший способ обернуть основное приложение в несколько контекстов?

Примечание. Да, я знаю избыточный код и знаю, что у избыточного кода нет этой проблемы.

Answer 1

Ну, недавно я столкнулся с той же проблемой и решил переместить вложенную структуру в HOC с помощью рекурсии (которая генерирует вложенную структуру внутри) на основе списка контекстов, и поместил ее в пакет npm с именем * 1002.* реагировать с несколькими контекстами .

Для провайдеров вы можете использовать HOC с именем withContextProvider следующим образом:

import React from 'react';
import { withContextProvider } from 'react-with-multiple-contexts';
import { ContextOne, ContextTwo, ContextThree, ContextFour } from './contexts';

const Component = (props) => (
  <React.Fragment>{props.children}</React.Fragment>
)

export const ComponentProvider = withContextProvider(Component, (props) => ([
  { context: ContextOne, value: props.contextOneVal },
  { context: ContextTwo, value: props.contextTwoVal },
  { context: ContextThree, value: props.contextThreeVal },
  { context: ContextFour, value: props.contextFourVal }
]));

// And later in code somewhere

<ComponentProvider
  contextOneVal="1"
  contextTwoVal="2"
  contextThreeVal="3"
  contextFourVal="4"
/>

И та же проблема относится к Context.Consumer , если вам нужно более одного потребителя в одном месте.По той же причине (избегая вложенной структуры в базе кода) вы можете использовать withContextConsumer, который также предоставляется из пакета npm, упомянутого ранее.