我最近几天一直在尝试使用React Context API制作一个小型“CMS”项目。但是我遇到了一个有趣的问题,思考了很长时间,但可能我还是想多了。如果您有任何指针,请告诉我,因为我在谷歌上没有找到类似的内容,只有基本的“入门”文章。
所以假设我们已经有以下数据模型:
- 文章 - 分类 - 图片
我为每个模型都创建了Provider-Consumer对,例如:
他们当然比这个更加详细,但是它们都有相同的结构。 现在我遇到的问题是,当你编辑一篇文章时,可以选择一个类别和一张图片。
为了解决这个问题,我创建了一个名为ArticleForm的组件。这个表单只是一个简单的组件,只接受props作为参数。
我还有另一个组件叫做MediaGrid,用于在单独的页面上显示和上传图片。
因此,为了确保ArticleForm可以完成我想要的所有事情,我创建了以下组件,称为ArticleFormContainer,其想法是我可能能够重用MediaGrid组件:
所以假设我们已经有以下数据模型:
- 文章 - 分类 - 图片
我为每个模型都创建了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或其他地方发布其余代码。
谢谢