react组件传值

父传子

//父组件
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) {
    // 通过this.props将子组件的值发送到父组件
    // myBtn是自定义事件名
    this.props.myBtn(val)
  }
  render () {
    return (
      <>
        {/* 用this.props接收 */}
        <div>{this.props.msg}</div>
        {/* 子组件当父组件传值类型于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>
      </>
    )
  }
}

跨级组件

单独创建Context.js文件 ，结构出我们需要的Provider(供应方)和Consumer(消费方)

import { createContext } from 'react'
//从createContext中解构出两个组件
const { Provider, Consumer } = createContext()
export { Provider, Consumer }

祖先组件向子孙类组件传值

//这是祖先组件
import React, { Component } from 'react'

//从context.js文件中导入Provider组件
import { Provider } from '../util/context'
import Father from '../father/father'

export default class grandfather extends Component {
  state = {
    ismsg: '我是祖先组件的值',
    num: 1
  }
    //该函数会传递到子孙类组件中，
    //当前val就是孙组件传递过来的值==>99  从而改变祖先组件中的num
  handlechannum = (val) => {
    this.setState({
      num: this.state.num + val
    })
  }
  render () {
    return (
       {/* Provider包裹根元素(这样Provider就是最大的根元素)
        value中可以传单个值，也可以传一个对象包含多个值，
        可以传一个函数：在子孙类组件中可以调用这个函数，也可以给这个函数传值，从而改变祖先组件
       */}
      <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组件中的回调函数的参数里可以获取Provider组件提供的value
            console.log(data)
            let { changenum } = data
            //data中的数据是响应式的
            return (
              <>
                {/* 我是祖先组件的值 */}
                <div>{data.ismsg}</div>
                {/* ()=>必须写，不然会死循环 */}
                <button onClick={() => changenum(99)}>利用祖先组件传递过来的函数，向祖先组件传值</button>
                <div>{data.num}</div>
              </>
            )
          }
        }
      </Consumer>
    )
  }
}