不用provider,爷爷组件传递属性给孙子组件
三个嵌套组件:Grandfather Fther Child
如果 Child 想要拿到最外层 Grandfather 的属性,就必须Grandfather–Fater–Child这样一层一层传递下来,
不仅麻烦,而且一旦中途传递出错,最后一层组件拿到的也是错误的
- grandfather.js
class Child extends React.Component {
state = {
age : 66
}
render(){
return (
<div>
<Father age = {this.state.age}>
</div>)
}
}
- father.js
class Father extends React.Component {
render(){
return (
<div>
<Child age = {this.props.age}>
</div>)
}
}
- child.js
class Child extends React.Component {
render(){
return (
<div>
{this.props.age} // 经过一层层传递拿到 grandfather.js的age值
</div>)
}
}
上面方法可知一层一层传递非常麻烦
实现一个provider简化属性传递
利用react的context实现一个provider,不用一层层传递,孙子组件直接通过context取到爷爷组件的属性
- app.js
import Provider from './provider'
import Child from './child';
<Provider info={{name:'max', age: 13}}>
<Child/>
</Provider>
- Provider.js
npm i prop-types --save 安装需要的包
import React, { Component,Children } from 'react';
import PropTypes from "prop-types"
import Child from './child'
class Provider extends React.Component {
//必须定义这个对象
static childContextTypes = {
store:PropTypes.object.isRequired
};
constructor(props){
super(props)
// 获取传给Provider组件的属性
this.store = {...props}
}
//设置上下文的公共内容
// 这样设置以后,Provider下面的子组件,孙子组件就可以this.context.store拿到所有Provider包含的属性
getChildContext(){
return {store:this.store}
}
render(){
return (
<div>
<Child/>
</div>)
}
}
export default Provider;
- child.js
import React, { Component } from 'react';
import PropTypes from "prop-types"
class Child extends React.Component {
// 必须要申明,react认为全局变量不好
static contextTypes = {
store:PropTypes.object.isRequired
};
render(){
return (
<div>
<h1>{this.context.store.info.age}</h1> // 这里直接获取provider提供的属性值
</div>)
}
}
export default Child;