3.context 跨组件传值

context传值相当于vue的provide和inject

使用时要将其嵌套在外层，Provider和Consumer

import React, { Component } from 'react'

// 创建Context对象
const UserContext = React.createContext({
  nickname: 'aaaa',
  level: -1,
})

const ThemeContext = React.createContext({
  color: 'black',
})

function ProfileHeader() {
  // jsx -> 嵌套的方式
  return (
    <UserContext.Consumer>
      {(value) => {
        return (
          <ThemeContext.Consumer>
            {(theme) => {
              return (
                <div>
                  <h2>用户昵称: {value.nickname}</h2>
                  <h2>用户等级: {value.level}</h2>
                  <h2 style={{ color: theme.color }}>颜色: {theme.color}</h2>
                </div>
              )
            }}
          </ThemeContext.Consumer>
        )
      }}
    </UserContext.Consumer>
  )
}

function Profile(props) {
  return (
    <div>
      <ProfileHeader />
    </div>
  )
}

export default class App extends Component {
  state = {
    nickname: 'kobe',
    level: 99,
  }
  render() {
    return (
      <div>
        <UserContext.Provider value={this.state}>
          <ThemeContext.Provider value={{ color: 'red' }}>
            <Profile />
          </ThemeContext.Provider>
        </UserContext.Provider>
      </div>
    )
  }
}