React/practise/24.Context实现跨组件传递数据.jsx

import React, { createContext } from 'react'
// App -> A -> C
// App数据 -> C

/* 注意事项：
1.上层组件和下层组件关系是相对的，只要存在就可以使用，通常都会通过 App 作为数据提供方
2.这里涉及到的语法都是固定的，有两处：(1)提供的位置：通过 value 提供数据；(2)获取的位置 { value => 使用 value 做什么都可以 } */

// 1.导入 createContext 方法并执行, 解构提供者和消费者
const { Provider, Consumer } = createContext()

function ComA() {
  return (
    <div>
      this is ComA
      <ComC />
    </div>
  )
}

function ComC() {
  return (
    <div>
      thi is ComC,
      {/* 3.通过 Consumer 使用数据 */}
      <Consumer>{(value) => <span>{value}</span>}</Consumer>
    </div>
  )
}

class App extends React.Component {
  state = {
    message: 'this is message',
  }

  render() {
    return (
      // 2.使用 provider 包裹根组件
      <Provider value={this.state.message}>
        <div>
          <ComA />
        </div>
      </Provider>
    )
  }
}

export default App