React之Context跨级组件传值

React跨级传参

跨级组件传参的好处

例如：react-redux 的原理就是利用了跨级传参的方法实现的，其中的好处不言而喻!!!

为什么要用跨级传参

    在单纯的父子传参中this.props就可以了。子传父也是通过调用父组件的方法去改变参数变化,假如在企业项目中不
只是单纯的父子传参，还有爷爷组件和孙子组件或者重孙玄孙甚至可能...玄玄玄孙等等，就好比自己的亲戚的七大姑八
大姨一样错综复杂，所以这时候React提供了一个非常简便和实用的东西      ---------    组件跨级传值

具体使用方法

1. 首先先下载下React脚手架，并搭建好目录结构
2. 第一步在src文件夹下创建utils文件夹并创建context.js文件，以及其他组件
   
3. 在context文件下书写一下代码(用来创建Context)

import React from 'react'

//创建context对象
var context = React.createContext();

//导出
export default context;

4. 在App文件里书写爷爷组件App 并在爷爷组件中引入 父亲组件List

class App extends Component{
     
    constructor(){
     
        super();
        this.state = {
     
            title:'支付宝'
        };
    }
    render(){
     
        return (
            <div className="app">
                {
     /* 通过value属性指定需要传递的值 */}
                {
     /* 希望接收值的组件 必须包裹在Provider内部 */}
                <Context.Provider value={
     this.state.title}>
                    <List></List>
                </Context.Provider>
            </div>
        )
    }
}

export default App;

4. 在List文件里书写父亲组件List 并在爷爷组件中引入 孙子组件Item

import React, {
      Component } from 'react'

import Item from './Item'

export default class List extends Component {
     
    render() {
     
        return (
            <div>
                <Item></Item>
            </div>
        )
    }
}

5. 孙组件Item

import React, {
      Component } from 'react'
import Context from '../utils/context'
export default class Item extends Component {
     
    render() {
     
        return (
            <div className="item">
                <Context.Consumer>
                    {
     
                        (value) => {
     
                            console.log('Item接收到了值:', value);
                            /* 不能在这里用setState保存接收的value */
                            /* 否则会死循环 */
                            /* 对于接收到value,一般的处理方式: 立即渲染 */
                            return (
                                <h2>{
     value}</h2>
                            );
                        }
                    }
                </Context.Consumer>
            </div>
        )
    }
}

6. 孙组件进行数据的展示和渲染

import React, {
      Component } from 'react'

import Context from '../utils/context'

export default class Btn extends Component {
     
    render() {
     
        return (
            <div className="btn">
                <Context.Consumer>
                    {
     
                        (value) => {
      
                            console.log('Btn接收到了值:', value);
                            /* 不能在这里用setState保存接收的value */
                            /* 否则会死循环 */
                            /* 对于接收到value,一般的处理方式: 立即渲染 */
                            return (
                                <h2>{
     value}</h2>
                            );
                        }
                    }
                </Context.Consumer>
            </div>
        )
    }

这样就是实现了跨级传参

总结

1. 创建context对象

var context = React.createContext();

2. 传值的组件,利用 Provider 组件传值,值通过value属性指定;
   注意： 须将需要接收值的组件包裹在Provider内,这样所有内层组件都可以接收到这个value值，通俗的讲就是数据的入口。

3. 接收值的组件,利用Consumer 组件接收值,内部是个函数

<Context.Consumer>  
 {
     
     (value) => {
     
        console.log('Btn接收到了值:', value);
         /* 不能在这里用setState保存接收的value */         
         /* 否则会死循环 */
         /* 对于接收到value,一般的处理方式: 立即渲染 */
         return (
             <h2>{
     value}</h2>
         );
     }
 }
</Context.Consumer>