React的contextType的使用方法简介
Posted littlespill
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React的contextType的使用方法简介相关的知识,希望对你有一定的参考价值。
上一篇介绍了Context的使用方法。但是Context会让组件变得不纯粹,因为依赖了全局变量。所以这决定了Context一般不会大规模的使用。所以一般在一个组件中使用一个Context就好。
由于Consumer的特性,里面的代码必须是这个函数的返回值。这样就显得复杂与不优雅了。那该怎么解决呢?这样contextType就派上用场了。
还拿上一篇的demo来举例。并且修改它。 上一篇的代码:
import React, Component, createContext from ‘react‘;
const BatteryContext = createContext();
//声明一个孙组件
class Leaf extends Component
render()
return (
<BatteryContext.Consumer>
battery => <h1>Battery : battery</h1>
</BatteryContext.Consumer>
)
//声明一个子组件
class Middle extends Component
render()
return <Leaf />
class App extends Component
render()
return (
<BatteryContext.Provider value=60>
<Middle />
</BatteryContext.Provider>
);
export default App;
接下里我们修改他,使他更加优雅一些:
我们只需要修<Leaf/>组件的代码就可以。
首先我们用static来声明contextType:
static contextType = BatteryContext;
这样在运行时就可以获取到一个新的属性。我们来接收他。
const battery = this.context;
这样Consumer就可以完全不再使用了。
return<h1>Battery : battery</h1>
全部代码:
import React, Component, createContext from ‘react‘;
const BatteryContext = createContext();
//声明一个孙组件
class Leaf extends Component
static contextType = BatteryContext;
render()
const battery = this.context;
return<h1>Battery : battery</h1>
//声明一个子组件
class Middle extends Component
render()
return <Leaf />
class App extends Component
state =
battery: 60,
render()
const battery = this.state;
return (
<BatteryContext.Provider value=battery>
<button
type="button"
onClick=() => this.setState( battery: battery - 1 )
>
减减
</button>
<Middle />
</BatteryContext.Provider>
);
export default App;
效果图:
效果和使用Consumer没有什么区别。可见只有一个Context的时候,使用contextType要比使用Consumer简单的多。
以上是关于React的contextType的使用方法简介的主要内容,如果未能解决你的问题,请参考以下文章
React中的connect使用(Provider+Consumer例子 以及 contextType+this.context例子)
使用动态上下文数据时如何用新的 React 上下文 api 替换旧的 React contextTypes?
TypeError:无法读取未定义的属性“contextTypes”
在reactjs功能组件中实现contextType的正确方法是什么?