zoukankan      html  css  js  c++  java
  • react-父子子孙组件嵌套-context

    方案一

    import React from 'react'
    import ReactTypes from 'prop-types'
    
    /* // 最外层的父组件
    export default class Com1 extends React.Component {
      constructor(props) {
        super(props)
    
        this.state = {
          color: 'red'
        }
      }
    
      render() {
        return <div>
          <h1>这是 父组件 </h1>
          <Com2 color={this.state.color}></Com2>
        </div>
      }
    }
    
    
    
    // 中间的子组件
    class Com2 extends React.Component {
      render() {
        return <div>
          <h3>这是 子组件 </h3>
          <Com3 color={this.props.color}></Com3>
        </div>
      }
    }
    
    
    // 内部的孙子组件
    class Com3 extends React.Component {
      render() {
        return <div>
          <h5 style={{ color: this.props.color }}>这是 孙子组件 </h5>
        </div>
      }
    } */
    
    

    方案二:用context

    context特性

    记住一串单词组合getChildContextTypes
    前3个、后3个、后两个
    一个方法、两个静态属性

    import React from 'react'
    import ReactTypes from 'prop-types'
    
    // 最外层的父组件
    export default class Com1 extends React.Component {
      constructor(props) {
        super(props)
    
        this.state = {
          color: 'red'
        }
      }
    
      //   getChildContextTypes
      // 1. 在 父组件中,定义一个 function,这个function 有个固定的名称,叫做 getChildContext ,内部,必须 返回一个 对象,这个对象,就是要共享给 所有子孙组件的  数据
      getChildContext() {
        return {
          color: this.state.color
        }
      }
    
      // 2. 使用 属性校验,规定一下传递给子组件的 数据类型, 需要定义 一个 静态的(static) childContextTypes(固定名称,不要改)
      static childContextTypes = {
        color: ReactTypes.string // 规定了 传递给子组件的 数据类型
      }
    
    
      render() {
        return <div>
          <h1>这是 父组件 </h1>
          <Com2></Com2>
        </div>
      }
    }
    
    
    
    // 中间的子组件
    class Com2 extends React.Component {
      render() {
        return <div>
          <h3>这是 子组件 </h3>
          <Com3></Com3>
        </div>
      }
    }
    
    
    
    // 内部的孙子组件
    class Com3 extends React.Component {
    
      // 3. 上来之后,先来个属性校验,去校验一下父组件传递过来的 参数类型
      static contextTypes = {
        color: ReactTypes.string // 这里,如果子组件,想要使用 父组件通过 context 共享的数据,那么在使用之前,一定要先 做一下数据类型校验
      }
    
      render() {
        return <div>
          <h5 style={{ color: this.context.color }}>这是 孙子组件  ---  {this.context.color} </h5>
    
        </div>
      }
    }
    
  • 相关阅读:
    Penetration Test
    SpringBoot启动时初始化数据库及spring.jpa.generate-dll与spring.jpa.hibernate.ddl-auto之间的困惑
    maven deploy到ftp服务器
    spring-boot:repackage生成的MANIFEST.MF中的Main-Class和Start-Class
    @GeneratedValue的strategy
    mysql方言设置
    jpa.generate-ddl和jpa.hibernate.ddl-auto
    在家学习VS在咖啡馆学习
    StatusLogger No Log4j 2 configuration file found
    tomcat应用部署顺序
  • 原文地址:https://www.cnblogs.com/colorchild/p/13494321.html
Copyright © 2011-2022 走看看