react的父组件与孙子组件之间的传值

最新推荐文章于 2024-02-01 13:28:14 发布

原创最新推荐文章于 2024-02-01 13:28:14 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在React中利用Context API实现从父组件到孙子组件的跨级传值，并详细解释了使用propTypes进行类型检查的过程。

关于react的父组件与孙子组件之间的传值–context

1.实现父组件和孙子组件之间传值需要有一个前提条件，需要在react项目中下载插件 prop-types，安装方法，我用的是npm，执行命令是npm i prop-types
2.需要在父组件中定义方法：getChildContext（方法名固定）并且添加一个静态属性 childContextTypes来做类型校验

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

export default class App1 extends Component {

    static childContextTypes={
        list:PropTypes.array
    }
    
    getChildContext(){
        return {
            list:[1,2,3,4,5,6,7]
        }
    }

    render() {
        return (
            <div>
                <Child></Child>
            </div>
        )
    }
}

3，在孙子组件定义静态属性 contextTypes 来做父组件传过来的值的校验，然后获取值用this.context.变量名来获取父组件传过来的值

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

class ChildChild extends Component {

    static contextTypes={
        list:PropTypes.array
    }

    render(){
        return (
            <div>
                {
                    this.context.list.map((v,k)=>{
                        return (
                        <div key={k}>{v}</div>
                        )
                    })
                }
            </div>
        )
    }
}