Слишком много поставщиков контекста React

Если вам нужно решение для создания поставщиков без каких-либо сторонних библиотек, вот решение с аннотациями Typescript:

// Compose.tsx

interface Props {
    components: Array<React.JSXElementConstructor<React.PropsWithChildren<any>>>
    children: React.ReactNode
}

export default function Compose(props: Props) {
    const { components = [], children } = props

    return (
        <>
            {components.reduceRight((acc, Comp) => {
                return <Comp>{acc}</Comp>
            }, children)}
        </>
    )
}

Использование:

<Compose components={[BrowserRouter, AuthProvider, ThemeProvider, ChatProvider]}>
    <App />
</Compose>

Конечно, вы можете удалить аннотации, если не используете Typescript.

Используйте ответ @ rista404 - https://stackoverflow.com/a/58924810/4035
поскольку react-context-composer устарел.

Спасибо @ AO17 за пинг.

Отказ от ответственности: Я никогда не использовал это, просто исследовал.

FormidableLabs (они участвуют во многих проектах OSS) имеет проект под названием react-context-composer

Кажется, это решило вашу проблему.

React предлагает новый контекстный API. API поощряет сочинение. Этот служебный компонент помогает содержать ваш код в чистоте, когда ваш компонент будет отображать несколько поставщиков и потребителей контекста.

Решение с for циклом:

export const provider = (provider, props = {}) => [provider, props];

export const ProviderComposer = ({providers, children}) => {
    for (let i = providers.length - 1; i >= 0; --i) {
        const [Provider, props] = providers[i];
        children = <Provider {...props}>{children}</Provider>
    }
    return children;
}

Использование:

<ProviderComposer
    providers={[
        provider(AuthProvider),
        provider(ThemeProvider),
        provider(MuiPickersUtilsProvider, {utils: DateFnsUtils}),
    ]}
>
    <App/>
</ProviderComposer>

Несколько строк кода решат вашу проблему.

import React from "react"
import _ from "lodash"

/**
 * Provided that a list of providers [P1, P2, P3, P4] is passed as props,
 * it renders
 *
 *    <P1>
        <P2>
          <P3>
            <P4>
              {children}
            </P4>
          </P3>
        </P2>
      </P1>
 *
 */

export default function ComposeProviders({ Providers, children }) {
  if (_.isEmpty(Providers)) return children

  return _.reverse(Providers)
    .reduce((acc, Provider) => {
      return <Provider>{acc}</Provider>
    }, children)
}

Одно из простых решений - использовать что-то похожее на функцию compose в https://github.com/reduxjs/redux/blob/master/src/compose.js и объедините всех поставщиков вместе.

provider.js

const Providers = compose(
    AuthProvider,
    ThemeProvider,
    ChatProvider
);

также я не использовал это решение, но с новой функцией перехватчиков React вместо рендеринга ваших контекстов вы можете использовать перехватчик реакции для доступа к нему в определении функции.

перекомпоновка js-помощника по вложению, если вам нужно добавить внешние реквизиты для использования элемента провайдера withprops hoc