天津做app和网站的公司,专业网站开发技术,中国空间站建造历程,网络规划设计师一本通如果有这样一个结构#xff1a;三级嵌套#xff0c;分别是#xff1a;一级父组件、二级子组件、三级孙子组件#xff0c;且前者包含后者#xff0c;结构如图#xff1a; 如果把一个属性#xff0c;比如color#xff0c;从一级传递给三级#xff0c;一般做法是使用prop…如果有这样一个结构三级嵌套分别是一级父组件、二级子组件、三级孙子组件且前者包含后者结构如图 如果把一个属性比如color从一级传递给三级一般做法是使用props逐一向下传递代码如下 // 一级父组件
class Level1 extends React.Component{
render(){
return Level2 colorred/
}
}
// 二级子组件
class Level2 extends React.Component{
render(){
return Level3 color{this.props.color}/
}
}
// 三级孙子组件
class Level3 extends React.Component{
render(){
return div color{{color: this.props.color}}/
}
} 看代码会发现level2根本没有用到color但是为了在level3中使用它还是不得不写上color{this.props.color}。一是代码冗余二是如果后期把color改成txt或者增加一个属性改起来复杂。那么如何把color直接从level1给level3呢答案是使用伟大的Context实现越级传递。
直接上代码 // 一级父组件
class Level1 extends React.Component{
// ****第2步给子类共用属性赋值****
getChildContext() {
return {color: red};
}
render(){
return Level2/
}
}
// ****第1步定义子类们共用的属性及类型****
Level1.childContextTypes {
color: React.PropTypes.string
};
// 二级子组件
class Level2 extends React.Component{
render(){
return Level3/
}
}
// 三级孙子组件
class Level3 extends React.Component{
render(){
return div color{{color: this.context.color}}/ // ****第4步使用this.context接受越级传递的参数****
}
}
// ****第3步定义子组件从组件需要接受的属性和类型****
Level3.contextTypes {
color: React.PropTypes.string
}; 每一步的说明也都在备注里了这里就不再一一解读了。
另外在React Redux中Provider组件通过context方式把store传递给所有容器和子组件的方式底层也是利用了这个原理。 更多专业前端知识请上
【猿2048】www.mk2048.com
