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>

是否有更好的方法将核心应用程序包装在多个上下文中？

注意：是的，我知道redux，并且我知道redux没有这个问题。

Answer 1

好，最近我遇到了同样的问题，决定根据上下文列表将嵌套结构递归移动到HOC（在其中生成嵌套结构），然后将其放入名为npm的软件包中 react-with-multiple-contexts。

对于提供商，您可以像这样使用名为withContextProvider的HOC：

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软件包中提供。

包装具有多个上下文的组件的更好方法

1 个答案: