背景
在上一篇"跨组件传输数据"写到了context的测试部分“会放在下一篇博客中与Projects选择器自定义组件一同测试”。所以就写了一个project选择器组件来测试context。
要求
实现一个自定义组件,接收project数组与selectedKey为参数,渲染选中高亮的projects展示组件,而且要与导航栏中的选择器保持一致。
实现
组件整体设计结构如下:
Home
:Projects
的父组件,在页面中的<Context.Consumer>
标签内使用Projects
,将value传递给组件Projects
:项目选择器组件,即在效果图中的白色区块部分,使用自定义的复用性组件构成,本身复用度较低,但样式复用度很高ProjectBlock
:Projects
中的基本组件,复用度高。
实现代码
//Home.js
<ProjectsContext.Consumer>
{
//获取projects向下层组件传递
(value)=>{
console.log(value);
return (<Projects projects={
value.projects} selectedKey={
value.selectedProject}/>);
}
}
</ProjectsContext.Consumer>
将组件所需props向下传递
//Projects.js
<一堆包装元素>
{
//防止projects为undefined报错
this.props.projects?
this