react中Context的使用

import React, { Component } from 'react'
const { Provider, Consumer } = React.createContext()
let data = {
  name: 'lisi',
  age: 18
}

class B extends Component {
  render() {
    return (
      <Consumer>
        {
          data => {
            return (
              <div>
                姓名： {data.name}
                年龄： {data.age}
              </div>
            )
          }
        }
      </Consumer>
    )
  }
}
class A extends Component {
  render() {
    return (
      <div>
        <B></B>
      </div>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <Provider value={data}>
        <div>
          <A></A>
        </div>
      </Provider>
    )
  }
}

现版本采用useContext.

 

import React, { useContext } from 'react'

let data = {
    name: 'lisi',
    age: 18
}
const context = React.createContext(data)


function Dialog(props) {
    return (
        <div>
            {props.ctx.name}
        </div>
    )
}

export default function App() {
    const ctx = useContext(context)
    return (
        <div>
            <Dialog ctx={ctx}></Dialog>
        </div>
    )
}