美文网首页
React 新版本context使用方法

React 新版本context使用方法

作者: 拖着蜗牛看风景 | 来源:发表于2019-05-29 22:52 被阅读0次

React在16.3版本中发布了新版的context。在新版本中使用了Provider和Customer模式,即在顶层的Provider中的value提供数据,在子孙等下级节点中使用Consumer来获取值。
首先,我们创建一个content实例createContext.js:

import React from 'react';
export const testContext = React.createContext({
    color: "green"
})

新建这个公共的createContext的目的是为了Provider 和 Consumer 来自同一次 React.createContext 调用(它的必须要求)

其次,我们新建一个父组件main.js:

import React, { Component } from 'react';
import {testContext} from './createContext'
import ChildrenPage from './childrenPage'
export default class Main extends Component {
    render() {
        let name ="小人头"
        return(
            <div>
                <testContext.Provider value={{ color: "red"}}>
                    <p>父组件定义的值:{ name }</p>
                    <ChildrenPage></ChildrenPage>
                </testContext.Provider>
            </div>
        )
    }
}

然后在新建一个子组件childrenPage.js:

import React, { Component } from 'react';
import GrandSon from './grandson'
export default class childrenPage extends Component {
    constructor(props) {
        super(props)
        this.state = { }
    }
    render() {
        return(
            <div>
                <p>这是子组件</p>
                <GrandSon/>
            </div>
        )
    }
}

最后我们在新建一个孙子组件grandson.js:

import React, { Component } from 'react';
import {testContext} from '../createContext'


export default class GrandSon extends Component {
    constructor(props) {
        super(props)
        this.state = { }
    }
    render() {
        return(
            <testContext.Consumer>
                { (name) => (
                    <div>
                        <p>这是孙子组件</p>
                        {name.color}
                    </div>
                )}
            </testContext.Consumer>
        )
    }
}

我们运行程序可以看到,对应的color的值就是从父组件直接传值到孙子组件,而不必一层一层的通过props进行传值,相比较以前的那种传值更加的方便、简介、明了。

相关文章

网友评论

      本文标题:React 新版本context使用方法

      本文链接:https://www.haomeiwen.com/subject/rlnutctx.html