React:解决组件跨级值传递

最新推荐文章于 2022-08-29 19:24:42 发布

zyCoding

最新推荐文章于 2022-08-29 19:24:42 发布

阅读量351

点赞数

文章标签： react.js javascript vue.js

本文链接：https://blog.csdn.net/zyCoding/article/details/123186785

版权

import React, { Component } from 'react'
import PropTypes from "prop-types"

// 孙子
class Grandson extends Component {
    //只需声明需要的全局上下文数据，就可自动注入子组件的context属性中
    static contextTypes = {
        num: PropTypes.number
    }
    render() {
        return <h1>孙子组件{this.context.num}</h1>
    }
}

// 儿子
class Son extends Component {
    render() {
        return <Grandson></Grandson>
    }
}

// 父亲
export default class Father extends Component {
    // 先定义类型，声明上下文数据类型
    static childContextTypes = {
        num: PropTypes.number
    }
    // 传入数据和值
    getChildContext() {
        return {
            num: 666
        }
    }
    render() {
        return (
            <div>
                <Son></Son>
            </div>
        )
    }
}