React -- context用法

通过 context 可以跨层级传递数据

 

关键API：React.createContext()

创建 context 后，可以拿到 Provider 和 Consumer ，那么就可以通过 Provider 提供数据（App.js） 和 通过 Consumer 获取数据（A.js）

也可以通过 Context 拿到数据（B.js）

 

---

例子：

userContext.js

创建Context：

// userContext.js
import React, { Component } from 'react'
const UserContext = React.createContext('default value') // 提供默认值
const UserProvider = UserContext.Provider
const UserConsumer = UserContext.Consumer
export { UserContext, UserProvider, UserConsumer }

 

App.js

提供数据：

// App.js
import { UserProvider } from './userContext'
import React, { Component } from 'react'
import A from './A'
import B from './B'

export default class App extends Component {
  render() {
    return (
      <UserProvider value="hello">
        <A />
        <B />
      </UserProvider>
    )
  }
}

 

A.js：

1. 利用Consumer来获取context的值：

// A.js
import { UserConsumer } from './userContext'
import React, { Component } from 'react'

export default class A extends Component {
  render() {
    return (
      <UserConsumer>
        {/* 这里参数名叫什么都可以，只是一个形参 */}
        {(value) => {
          return <div>A: {value}</div>
        }}
      </UserConsumer>
    )
  }
}

 

B.js

2. 利用Context来拿到context的值：

// B.js
import { UserContext } from './userContext'
import React, { Component } from 'react'

export default class B extends Component {
  static contextType = UserContext
  render() {
    return (
      <div>B: {this.context}</div>
    )
  }
}