React context 用法

最新推荐文章于 2025-06-15 11:27:48 发布

罗皮

最新推荐文章于 2025-06-15 11:27:48 发布

阅读量629

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/github_38124730/article/details/81560727

React 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用React的上下文API实现父子组件间状态共享的例子。通过定义父组件的`childContextTypes`和`getChildContext`方法以及子组件的`contextTypes`，实现了子组件直接访问父组件的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

class List extends Componet(){
    constructor(props){
        super(props)
    }
    static childContextTypes = {  // 必须写
        color: PropTypes.string
    }
    getChildContext(){
        return {
            color: 'res'
        }
    }
} 

子组件

class ListItem extends Componet(){
    constructor(props){
        super(props)
    }
    stati contextTypes = {  // 必须写
        color: PropTypes.string
    }
    render(){
        console.log(this.context.color)  // 就可用父组件的数据了
    }
}