爺爺元件

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,
          width: 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;