react 孙组件调用爷爷的属性

漠_silence_

于 2019-08-07 15:15:07 发布

阅读量1.2k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/silence_1210/article/details/98750118

版权

本文介绍了在React中，如何通过使用Context API来实现孙组件调用祖父组件的属性。示例代码展示了创建ThemeContext，定义LifeCycle组件和SubCounter子组件，并在SubCounter中通过contextType访问上下文中的属性。同时，展示了组件生命周期方法componentWillReceiveProps、shouldComponentUpdate和componentWillUnmount的使用。

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

import React, { Component } from ‘react’
const ThemeContext = React.createContext();
export default class LifeCycle extends Component {

static defaultProps = {
    name : "计数器"
}
constructor(props){
    super(props);
    this.state = {number:0};//初始化默认状态对象
    console.log("1.初始化");
}
componentWillMount(){
    console.log("2.组件将要挂载");
}
componentDidMount(){
    console.log("4.组件挂载完成");
}
shouldComponentUpdate(){
    console.log("5.询问组件是否需要更新");
    return true;
}
componentWillUpdate(){
    console.log("6.组件将要更新");
}
componentDidUpdate(){
    console.log("7.组件更新完成");
}
add = () =>{
    this.setState({
        number:this.state.number+1
    });
}
render() {
    console.log("3.6-7.渲染阶段");
    **const props = {
        color:"red"
    }**
    return (
        **<ThemeContext.Provider value = {props}>**
        <div>

最低0.47元/天解锁文章