3

过去几天我一直在修改 React Context API，将它作为一个小型宠物项目制作了一个小型“CMS”。但是我遇到了一个有趣的问题，我一直在考虑它，但实际上我可能想多了，我很乐意收到任何指示，因为我在 Google 中没有找到类似的东西，只有基本的“开始”的文章。

所以让我们假设我们有以下数据模型：

  • 文章
  • 类别
  • 图片

我为其中的每一个都制作了一个提供者-消费者对，例如：

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 或其他东西中。

谢谢

4

1 回答 1

2

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

如果两个或多个上下文值经常一起使用，您可能需要考虑创建自己的渲染道具组件来提供两者。

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

<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

于 2018-07-23T19:28:35.010 回答