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

Question

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

javascriptreactjsreact-context

3

我最近几天一直在尝试使用React Context API制作一个小型“CMS”项目。但是我遇到了一个有趣的问题，思考了很长时间，但可能我还是想多了。如果您有任何指针，请告诉我，因为我在谷歌上没有找到类似的内容，只有基本的“入门”文章。

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

- 文章 - 分类 - 图片

我为每个模型都创建了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或其他地方发布其余代码。

谢谢

- user2941726

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yts · Accepted Answer

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