举个例子 ,假如有三个组件,爷爷组件,父亲组件,孙子组件,如果孙子组件要拿到爷爷组件的中的一个值,
就组要从爷爷组件传到父亲组件在传递到孙子组件才能拿到,
万一父组件中有孙子的孙子组件,那就是一级一级的传递这样就显的很麻烦
react中使用Context就解决了这个问题
安装
//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';
那居图怎么实现呢
1.先用官方提供的叫谁家搭建一个项目
npx create-react-app my-app
cd my-app
npm start
在src目录下创建一个文件夹compontent
里面建立两个组件print.js,chils.js 也就是父亲组件 孙子组件, App.js就相当于爷爷组件
app.js
import React,{Component} from 'react';
import './App.css';
import Fuqin from './compontent/print';
import PropTypes from 'prop-types';
class App extends Component{
static childContextTypes ={
name:PropTypes.string
}
state={
name:'源码时代'
}
getChildContext(){
return{name:this.state.name}
}
render(){
return(
<div className='App'>
这是爷爷组件
<Fuqin name={this.state.name}/>
</div>
)
}
}
print.js
import React from './node_modules/react';
import Erzi from './chils';
class Fuqin extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<div className='footer'>
<Erzi name={this.props.name}/>
这是父亲组件
<p className='p'>{this.props.name}</p>是通过props组父组件拿到的值
</div>
</div>
)
}
}
export default Fuqin;
chils.js
import React,{Component} from './node_modules/react';
import PropTypes from './node_modules/prop-types';
class Fuqin extends Component{
static contextTypes ={
name:PropTypes.string
}
render(){
return(
<div>
<div className='footer'>
<p>这是孙子组件</p>
<p className='p'>
{this.props.name}
</p>
这是从爷爷组件一级一级传递下来的
<p className='p'>
{this.context.name}
</p>
---直接经过context拿到爷爷组建中的值
</div>
</div>
)
}
}
export default Fuqin;
这样不管父组件中嵌套多少层子组件只要在富组件中生命好,在子组件中就能直接拿到最顶层组件中的值了
最顶层组件
需要的组件中
看懂的话请点歌个