react.js跨级传值

react中组件之间的跨级传值：

跨级传值，在react中用到的是它自己提供的一套api：

React.createContext（通过这个api完成跨级传值）如下组件：
- <Provider/>外层生产数据（数据的生产者）
- <Consumer/>内层消费数据（数据的消费者）

作用：

方便祖先组件与后代组件（中间隔多少层组件都可以）传值，也就是通过React.createContext()创建一个Context对象，这个对象Context对象包含两个组件：

<Provider/>和<Consumer/>

示例代码：
使用Static向上级找Provider组件：
在这里插入图片描述
utils文件夹中的GrandParentContext.js文件：

import React, { createContext } from 'react'

const GrandParentContext = createContext({
    name: '门门',
    age: 23
})

export default GrandParentContext;
// 创建爱你一个全局的createContext来使用
// createContext(defaultValue)
// defaultValue是设置默认数据的

现在我们有父组件index，在这个父组件中有Son儿子组件。Son儿子组件中又包含了Grandson孙子组件。
如果我们将父组件的值，传递给孙子组件，就是跨组件传值，要用到createContext方法。

首先，将Son子组件引入到index父组件中
在将Grandson孙子组件引入到Son子组件中

import React, { Component } from 'react'
import Son from './views/Son'

export default class index extends Component {
    render() {
        return (
            <div>
                <Son/>
            </div>
        )
    }
}

import React, { Component } from 'react'
import Grandson from './Grandson'

export default class Son extends Component {
    render() {
        return (
            <div>
                 Son
                <Grandson/>
            </div>
        )
    }
}

回到index.js组件，将创建的GrandParentContext引入并模拟要传到孙子组件的数据：

import React, { Component } from 'react'
import Son from './views/Son'
// 1、引入创建全局createContext方法的js文件
import GrandParentContext from './utils/GrandParentContext'

export default class index extends Component {
    // 2、模拟一个想要传递的数据
    state = {
        obj: {
            name: '门门',
            age: 23
        }
    };
    render() {
        return (
            // 3、使用Provider组件Son包裹起来
            // 利用value属性传值，value属性是固定的
            // 要使用Provider将子组件包裹起来，值传到子组件必须使用value
            <GrandParentContext.Provider value={this.state.obj}>
                <Son />
            </GrandParentContext.Provider>
        )
    }
}

Provider中value是固定属性，传递给消费组件。当value值发生变化时，它内部所有消费都会重新渲染。

最后回到Grandson组件：

import React, { Component } from 'react'
// 1、引入方法
import GrandParentContext from '../utils/GrandParentContext'

export default class Grandson extends Component {
    // 2、使用static声明contextType ,
    // 在运行时会获得新的属性this.context,
    // 在页面使用即可
    static contextType = GrandParentContext;

    render() {
        return (
            <div>
                <div>
                    Grandson
                    {/* 3、使用this.context.xxx */}
                    <h3>姓名：{this.context.name}</h3>
                    <h3>年龄：{this.context.age}</h3>

                </div>
            </div>
        )
    }
}

浏览器打开运行，跨级传值成功：
在这里插入图片描述

上面使用static是向上级找 Provider组件，这是新的用法，用它就不能用Consumer组件了；
若使用Consumer组件可这么写，如下：

import React, { Component } from 'react'
// 1、引入方法
import GrandParentContext from '../utils/GrandParentContext'

export default class Grandson extends Component {
    // 2、使用static声明contextType ,
    // 在运行时会获得新的属性this.context,
    // 在页面使用即可
    // 向上级找Provider
    // static contextType = GrandParentContext;

    render() {
        return (
            <div>
                {/* <div>
                    Grandson
                    3、使用this.context.xxx
                    <h3>姓名：{this.context.name}</h3>
                    <h3>年龄：{this.context.age}</h3>
                </div> */}

                <GrandParentContext.Consumer>
                    {
                        (store) => {
                            return <div>
                                <h3>姓名：{store.name}</h3>
                                <h3>年龄：{store.age}</h3>
                            </div>
                        }
                    }
                </GrandParentContext.Consumer>
            </div>
        )
    }
}

浏览器运行：使用 Consumer 组件传值成功
在这里插入图片描述

react中组件之间的跨级传值：

作用：

猜你喜欢