首页 > 代码库 > React组件实现越级传递属性
React组件实现越级传递属性
如果有这样一个结构：三级嵌套，分别是：一级父组件、二级子组件、三级孙子组件，且前者包含后者，结构如图：
如果把一个属性，比如color，从一级传递给三级，一般做法是使用props逐一向下传递，代码如下：
// 一级父组件class Level1 extends React.Component{ render(){ return <Level2 color=‘red‘/> }}// 二级子组件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传递给所有容器和子组件的方式，底层也是利用了这个原理。
React组件实现越级传递属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。