React之跨组件传值

代码

import React, { Component,createContext } from 'react'
// import TestChild from './TestChild'

const {Provider,Consumer} = createContext()

// 父组件
class Text extends Component {
  render () {
    const person = {userid: 1,username: '小王'}
    return (
      <>
        <h1>我是父组件</h1>
        <Provider value={person}>
          <Node />
        </Provider>
      </>
    )
  }
}

// 子组件
class Node extends Component {
  render () {
    return (
      <>
        <SubNode />
      </>
    )
  }
}

// 孙子组件
class SubNode extends Component {
  render () {
    return (
      <>
        <Consumer>
          {
            person => <span>我是：{person.username}，用户id:{person.userid}</span>
          }
        </Consumer>
      </>
    )
  }
}



export default Text

效果图