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