react父子元件，兄弟元件，爺爺到孫子元件筆記

import React from 'react'
import App from './App'
// 1.父傳子、
// 2.子傳父
class ComCent extends React.Component {
  // 元件的props特點：
  // 1.可以給元件傳遞任意型別的資料
  // 2.props是隻讀的物件，只能讀取屬性的值，無法修改物件
  // 3.注意：使用類元件時，如果寫了建構函式，應該將props傳遞給super(),否則，無法在建構函式中獲取到props
  constructor (props) {
    super(props)
  }
  state = {
    msg: '我是父元件', // 這是父元件的值
    childrenMsg: '父元件傳給子元件的值'
  }
  // 父元件接收子元件方法
  getChildMsg = (msg) => {
    console.log('接收子元件資料', msg)
    this.setState({
      msg: msg // 這是父元件的值
    })
  }
  render() {
    return (
      <div>
        <h1>子傳父</h1>
        <h2>{this.state.msg}</h2>
        <Children getChildMsg={this.getChildMsg} childrenMsg={this.state.childrenMsg} />
      </div>
    )
  }
}
class Children extends React.Component {
  handleClick = () => {
    // 直接用props呼叫裡面的函式
    this.props.getChildMsg('我是子元件傳遞給父元件的值')
  }
  render () {
    return (
      <div>
        <hr></hr>
        <h1>父傳子</h1>
        <h3>我是子元件，----分割線---這個父元件傳給子元件的{this.props.childrenMsg}</h3>
        <button onClick={this.handleClick}>點我子元件給父元件傳遞props值</button>
      </div>
    )
  }
}
// 3.兄弟元件之間的傳值
class  ParentCom extends React.Component {
  state = {
    num: 0
  }
  // 寫一個函式接收兄弟2元件傳回來的值
  returnAdd = () => {
    this.setState({
      num: this.state.num + 1
    })
  }
  // 這是父元件，兩個兄弟元件要通過父元件來進來互動
  render () {
    return (
      <div>
        我是父元件
        {/* 呼叫第一個兄弟元件 */}
        <Child1Com num={this.state.num} />
        <Child1Com num={this.state.num}>我是第一個兄弟元件</Child1Com>
        <Child1Com num={this.state.num}>
          {
            () => console.log('這是一個函式節點')
          }
        </Child1Com>
        {/* 呼叫第二個兄弟元件 */}
        <Child2Com returnAdd={this.returnAdd} />
      </div>
    )
  }
}
function Child1Com (props) {
  // 呼叫第一個元件中傳過來的函式節點
  props.children()
  // 這是第一個兄弟元件
  return (
    <div>
      {/* props.children就是元件引入的文字節點，只要元件有傳值，接收元件就有props */}
      <p>{props.children}</p>
      <h1>計數器：{props.num} </h1>
    </div>
  )
}
function Child2Com (props) {
  function addNumber () {
    props.returnAdd()
  }
  // 這是第二個兄弟元件
  return (
    <div>
      <button onClick={() => props.returnAdd()}>+1</button>
      {/* <button onClick={addNumber}>+1</button> */}
    </div>
  )
}

// ---------------二：Context---------------------
// Context: 用來傳遞資料的，比如爺爺要傳給孫子，或者爺爺傳給孫子的孫子，
// 如果按元件傳值的話就要一層一層往下傳，這個時候就要用到Context
// 使用步驟：
  // 1.呼叫React.createContext()建立Provider(提供資料)和Consumer(消費資料)兩個元件
      // const {Provider, Consumer} = React.createContext()
  // 2.使用Provider元件作為父節點
      // <Provider>
      //   <div>
      //     <Child1Com />
      //   </div>
      // </Provider>
  // 3.設定value屬性，表示要傳遞的資料
      // <Provider value="pink"></Provider>
  // 4.呼叫Consumer元件接收資料
      // <Consumer>
      //   {data => <span>data參數列示接收到的資料--{data}</span>}
      // </Consumer>
  const {Provider, Consumer} = React.createContext()
  class  GrandParentCom extends React.Component {
    // 這是父元件，兩個兄弟元件要通過父元件來進來互動
    render () {
      return (
        <Provider value="pink">
          <div>
            我是爺爺元件
            {/* 呼叫下一級子元件 */}
            <Child1 />
          </div>
        </Provider>
      )
    }
  }
  function Child1 () {
    // 這是第一個子元件
    return (
      <div>
        <h1>我是爸爸元件，在這裡呼叫孫子元件 </h1>
        <Child2 />
      </div>
    )
  }
  function Child2 () {
    // 這是孫子元件
    return (
      <div>
        <Consumer>
          {
            data => <span>我是孫子元件，越過父元件，直接從爺爺元件拿值，
              拿的值是：--{data}
            </span>
          }
        </Consumer>
      </div>
    )
  }
// ----------------三、props深入-----props的校驗----------------------
// props校驗
  // 1.props校驗:允許在建立組建的時候，就指定props的型別、格式等
  // 2.作用：捕獲使用元件時因為props導致的錯誤，給出明確的錯誤提示
  // 增加元件的健壯性
  // App.propTypes = {
  //   colors: PropTypes.array // 定義colors為陣列格式
  // }
// 使用步驟：
  // 1.安裝包： prop-types(npm i props-types)
  // 2.匯入prop-types包
    // import PropTypes from 'prop-types'
  // 3.使用元件名.propTypes = {}來給元件的props新增校驗規則
  // 4.校驗規則通過PropTypes物件來指定
  // ParentCom.propTypes = {
  //   num: PropTypes.number
  //   num: PropTypes.array
  // }
  // 常見型別：1. array(陣列)、bool(布林)、func(函式)、number(數值)、
  // Object(物件)、string(字串)
    // 2.React元素型別: element
    // 3. 必填項：isRequired
    // 4.如果是物件則用shape()方法包裹起來
        // ParentCom.propTypes = {
        //   filter: PropTypes.shape({
        //      area: PropTypes.string,
        //      areaList: PropTypes.array
        //   })
        // }
// ----------------四：設定元件預設值-------------------------------
  // 如果元件中沒有傳預設值，那麼子元件中用props呼叫的就是這個預設值
  function DefaultProps (props) {
    return (
      <div>
        拿到預設值: {props.pageSize}
      </div>
    )
  }
  DefaultProps.defaultProps = {
    pageSize: 10 // 未傳入props時才有效，有傳入的以傳入為主
  }
// export default ComCent;
// export default ParentCom;
// export default GrandParentCom;
export default DefaultProps;