函数组件和类组件中React.createContext的使用

函数组件和类组件中React.createContext的使用

组成：两个页面文件 app.js 和 Tooltip.js；一个存放context的文件 indexContext.js

// indexContext.js
import React from 'react';

export const windowProp = {
    width: window.innerWidth,
    height: window.innerHeight
}

export const WindowPropsContext = React.createContext();

// app.js
import React from 'react';
import Tooltip from './Tooltip';
import { WindowPropsContext, windowProp } from './indexContext';

function App(){
    return (
        <div>
            <WindowPropsContext.Provider value={windowProp}>
                <Tooltip />
            </WindowPropsContext.Provider>
        </div>
    )
}

• 如果 Tooltip为class组件，则可以通过一下三种方式接受context中的属性
  • 方式①：使用 static 关键字定义类组件的 contextType

  import React, { Component } from 'react';
  import { WindowPropsContext } from './indexContext';
  
  export default class Tooltip extends Component {
      static contextType = WindowPropsContext;
      render(){
          return (
              <div>
                  { this.context.width } - { this.context.height }
              </div>
          )
      }
  }
  

  • 方式②：链式调用类的contextType属性

  class Tooltip extends Component {
      render(){
          return (
              <div>{ this.context.width } - { this.context.height }</div>
          )
      }
  }
  Tooltip.contextType = WindowPropsContext;
  export default Tooltip;
  

  • 方式③：使用createContext的Consumer属性

  export default class Tooltip extends Component {
      render(){
          return (
              <div>
                  <WindowPropsContext.Consumer>
                      { value => (
                          <div>{ value.height } - { value.width }</div>
                      ) }
                  </WindowPropsContext.Consumer>
              </div>
          )
      }
  }
  

• 如果 Tooltip 是函数组件
  • 可以使用 react hooks 中的 useContext

  import React, { useContext } from 'react';
  import { WindowPropsContext } from './indexContext';
  export default Tooltip(){
      const windowProps = useContext(WindowPropsContext);
      return (
          <div>
              { windowProps.width } - { windowProps.height }
          </div>
      )
  }