zoukankan      html  css  js  c++  java
  • react 爷爷组件件传递给孙子组件

    爷爷组件

    import React, { Component } from "react";
    import "./App.css";
    import TestHanderClick from "./components/TestHanderClick";
    import proptypeskey from "prop-types";
    
    export class App extends Component {
      // 也是人家提供的,不可以改变  传递给孙子组件的类型(必须写)
      // 爷爷组件传递给孙子组件,依赖于  prop-types;(验证参数的格式)
      static childContextTypes = {
        title: proptypeskey.string,
      };
    
      // getChildContext是人家提供的,设置穿度的内容(必须写)
      getChildContext() {
        return {
          title: "营业员==>给孙子的",
        };
      }
    
      render() {
        return (
          <div className="App">
            {/* 父组件传递给子组件的值 */}
            <TestHanderClick></TestHanderClick>
          </div>
        );
      }
    }
    
    export default App;
    

    父亲组件(父亲组件啥子都不用干)

    
    import React, { Component } from "react";
    import "./base.css";
    import SuoZi from "./SuoZi";
    
    // 父组件  
    export class TestHanderClick extends Component {
      //  static defaultProps是默认的写法,人家规定这样写的,你的默认值
      static defaultProps = {
        bg: "pink",
        wi: "400px",
        he: "200px",
      };
    
      render() {
        return (
          // 使用值
          <div
            style={{
              background: this.props.bg,
               this.props.wi,
              height: this.props.he,
            }}
          >
            <SuoZi></SuoZi>
          </div>
        );
      }
    }
    
    export default TestHanderClick;
    
    

    孙子组件

    import React, { Component } from "react";
    
    // 引入验证格式类型的插件
    import proptypeskey from "prop-types";
    
    export class SuoZi extends Component {
      // 也是人家提供的,不可以改变(必须写)
      static contextTypes = {
        title: proptypeskey.string,
      };
    
      render() {
        return (
          <div>
            {/* 获取值 */}
            <p>爷爷=={this.context.title} </p>
          </div>
        );
      }
    }
    
    export default SuoZi;
    
    

    作者:流年少年
    出处:https://www.cnblogs.com/ishoulgodo/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    简单工作流实现思路总结
    (转)基于SAML的单点登录介绍
    Kerberos简介
    (转)Java NIO框架Mina、Netty、Grizzly介绍与对比
    职场老好人为何没发展
    如何改变、摆脱职场老好人
    线程的状态转换图
    设计模式分类
    (转)简单的RPC java实现 .
    MYSQL导入CSV格式文件数据执行提示错误(ERROR 1290): The MySQL server is running with the --secure-file-priv option so it cannot execute this statement.
  • 原文地址:https://www.cnblogs.com/ishoulgodo/p/13543175.html
Copyright © 2011-2022 走看看