函数组件和类组件中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> ) }