React里的Context - 不同js文件下的组件

作用： 跨组件传递数据

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递。

使用步骤[主要注意的是Consumer 要按需导出导入]

调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件 【Consumer 组件 会一层一层往上找，找到 其 最近的 Provider 的数据】

根组件App.js

export const { Provider, Consumer } = React.createContext()

import React from 'react'
import Grandfa from './grandfa'
// 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件
export const { Provider, Consumer } = React.createContext()
class App extends React.Component {
  render() {
    return (
      <>
        <Provider value="Context解决层级比较多的 组件间的 通讯">
          <Grandfa />
        </Provider>

      </>
    )
  }
}
export default App

grandfa .js

import React from 'react'
import Fa from './fa'

class Grandfa extends React.Component {
  render() {
    return (
      <div>
        <Fa></Fa>
      </div>
    )
  }
}
export default Grandfa

 fa.js

import React from 'react'
import Son from './son'

class Fa extends React.Component {
  render() {
    return (
      <div>
        <Son></Son>
      </div>
    )
  }
}
export default Fa

son.js 

import React from 'react'
import { Consumer } from './App'

class Son extends React.Component {
  render() {
    return (
      <div>
        <Consumer>{(data) => <p>{data}</p>}</Consumer>
      </div>
    )
  }
}
export default Son