react中Context的用法，一看就懂

举个例子 ，假如有三个组件，爷爷组件，父亲组件，孙子组件，如果孙子组件要拿到爷爷组件的中的一个值，
就组要从爷爷组件传到父亲组件在传递到孙子组件才能拿到，

万一父组件中有孙子的孙子组件，那就是一级一级的传递这样就显的很麻烦

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(这是爷爷组件)}}

print.js

import React from './node_modules/react';
import  Erzi from './chils';class Fuqin extends React.Component{constructor(props){super(props);}render(){return(这是父亲组件
{this.props.name}
是通过props组父组件拿到的值)}
}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(
这是孙子组件
{this.props.name} 
这是从爷爷组件一级一级传递下来的
{this.context.name}
---直接经过context拿到爷爷组建中的值)}
}export default Fuqin;

这样不管父组件中嵌套多少层子组件只要在富组件中生命好，在子组件中就能直接拿到最顶层组件中的值了
最顶层组件

需要的组件中

看懂的话请点歌个

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！