父?jìng)髯?/h4>

//父組件
import React, { Component } from 'react'
import Son from '../son/son'
export default class father extends Component {
  state = {
    msg: '我是父組件的值'
  }
  render () {
    return (
      <>
        {/* 自定義屬性 */}
        <Son msg={this.state.msg}></Son>
      </>
    )
  }
}

//子組件
import React, { Component } from 'react'
export default class son extends Component {
  render () {
    return (
      // 用this.props接收
      <div>{this.props.msg}</div>
    )
  }
}

子傳父

//子組件
import React, { Component } from 'react'

export default class son extends Component {
  state = {
    sonmsg: '我是子組件的值'
  }
  hendlemysonmsg (val) {
    // 通過(guò)this.props將子組件的值發(fā)送到父組件
    // myBtn是自定義事件名
    this.props.myBtn(val)
  }
  render () {
    return (
      <>
        {/* 用this.props接收 */}
        <div>{this.props.msg}</div>
        {/* 子組件當(dāng)父組件傳值類型于vue中的自定義事件 */}
        <button onClick={() => this.hendlemysonmsg(this.state.sonmsg)}>子傳父</button>
      </>
    )
  }
}


//父組件
import React, { Component } from 'react'
import Son from '../son/son'
export default class father extends Component {
  state = {
    msg: '我是父組件的值'
  }
  hendlemyBtn (val) {
    console.log(val)  //我是子組件的值
  }
  render () {
    return (
      <>
        {/* 自定義屬性 */}
        <Son msg={this.state.msg} myBtn={(val) => this.hendlemyBtn(val)}></Son>
      </>
    )
  }
}

跨級(jí)組件

單獨(dú)創(chuàng)建Context.js文件 ，結(jié)構(gòu)出我們需要的Provider(供應(yīng)方)和Consumer(消費(fèi)方)

import { createContext } from 'react'
//從createContext中解構(gòu)出兩個(gè)組件
const { Provider, Consumer } = createContext()
export { Provider, Consumer }

祖先組件向子孫類組件傳值

//這是祖先組件
import React, { Component } from 'react'

//從context.js文件中導(dǎo)入Provider組件
import { Provider } from '../util/context'
import Father from '../father/father'

export default class grandfather extends Component {
  state = {
    ismsg: '我是祖先組件的值',
    num: 1
  }
    //該函數(shù)會(huì)傳遞到子孫類組件中绽淘，
    //當(dāng)前val就是孫組件傳遞過(guò)來(lái)的值==>99  從而改變祖先組件中的num
  handlechannum = (val) => {
    this.setState({
      num: this.state.num + val
    })
  }
  render () {
    return (
       {/* Provider包裹根元素(這樣Provider就是最大的根元素)
        value中可以傳單個(gè)值朝扼，也可以傳一個(gè)對(duì)象包含多個(gè)值，
        可以傳一個(gè)函數(shù)：在子孫類組件中可以調(diào)用這個(gè)函數(shù)根暑，也可以給這個(gè)函數(shù)傳值，從而改變祖先組件
       */}
      <Provider value={{ 'ismsg': this.state.ismsg, "changenum": (val) => this.handlechannum(val), 'num': this.state.num }}>
        <Father></Father>
      </Provider>
    )
  }
}


//孫類組件
import React, { Component } from 'react'
import { Consumer } from '../util/context'

export default class son extends Component {
  render () {
    return (
      <Consumer>
        {
          (data) => {
            //在Consumer組件中的回調(diào)函數(shù)的參數(shù)里可以獲取Provider組件提供的value
            console.log(data)
            let { changenum } = data
            //data中的數(shù)據(jù)是響應(yīng)式的
            return (
              <>
                {/* 我是祖先組件的值 */}
                <div>{data.ismsg}</div>
                {/* ()=>必須寫，不然會(huì)死循環(huán) */}
                <button onClick={() => changenum(99)}>利用祖先組件傳遞過(guò)來(lái)的函數(shù)矢赁，向祖先組件傳值</button>
                <div>{data.num}</div>
              </>
            )
          }
        }
      </Consumer>
    )
  }
}