Question

最近几天，我一直在修改React Context API，并以此作为一个小型宠物项目来制作一个小型“ CMS”。不过，我遇到了一个有趣的问题，我一直在思考很多问题，但实际上我可能考虑得太深了，我很乐意收到任何建议，因为我在Google中找不到这样的东西，只有基本的“入门”文章。

因此，假设我们具有以下数据模型：

文章
类别
图片

我已经为每个提供者提供了一个Provider-Consumer对，例如：

const Context = React.createContext();

class ArticleProvider extends React.Component {
    this.state = { articles : [] };

    render() {
        <Context.Provider value={ this.state }>
            {this.props.children}
        </Context.Provider>
    }
}

const ArticleConsumer = (props) => (
    <Context.Consumer>
        { props.children }
    </Context.Consumer>
);

它们当然比这要充实得多，但是它们都具有相同的结构。现在我遇到了问题，当您编辑文章时，您可以选择类别和图像。

为解决此问题，我制作了名为ArticleForm的组件。这种形式是一个简单的组件，只需要以props作为参数。

我还有另一个称为MediaGrid的组件，用于在单独的页面上显示和上传图像。

因此，为了确保ArticleForm可以完成我想做的所有事情，我制作了以下名为ArticleFormContainer的组件，以期我可以重用MediaGrid组件：

<ArticleProvider { ...props }>
  <CategoryProvider>
    <MediaProvider>
      <ArticleConsumer>
        { (article) =>
          <CategoryConsumer>
            { (category) =>
              <MediaConsumer>
                { (media) => <ArticleForm { ...article } { ...category } { ...media } /> }
              </MediaConsumer>
            }
          </CategoryConsumer>
         }
       </ArticleConsumer>
     </MediaProvider>
   </CategoryProvider>
</ArticleProvider>

但是我无法摆脱这种感觉，因为它太忙了，可能不是最好的方法。

任何想法如何改善这一点？如果这还不够，请询问，我将其余代码粘贴到Pastebin或其他东西中。

谢谢

Answer 1

react docs提到了需要多个上下文的用例。他们说

如果经常同时使用两个或多个上下文值，则您可能要考虑创建自己的提供这两个值的渲染道具组件。

因此，基本思路是，您可以在整个应用中使用组合的上下文，例如：

<CombinedContextsConsumer render={({context1, context2}) => (
    <div>{context1.value}</div>
    <div>{context2.value}</div>
)}/>

CombinedContextsConsumer看起来像这样：

<Context1.Consumer>
    {context1 => (
        <Context2.Consumer>
            {context2 => (
                {props.render({context1, context2})}
            )}
        </Context2.Consumer>
    )}
</Context1.Consumer>

您不希望此可重用组件中的提供程序。这将导致每次使用上下文数据时都会对其进行重置。这也将意味着使用者之间不会共享数据，因为他们每个人都有他们自己的上下文副本。如果这些提供程序是全局上下文，则在应用程序级别的树中应该更高。

npm上有几个软件包可以使您的工作更轻松，但是我从来没有亲身经历过。这个看起来很有趣：

https://www.npmjs.com/package/react-compose-context-consumers

在多个上下文之间传递数据

1 个答案: