脚本宝典收集整理的这篇文章主要介绍了React手稿 - Context，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Context
Context提供了除PRops之外的传参数的方式。
Context是全局跨组件传递数据的。
API
-
React.createContext
const {Provider, Consumer} = React.createContext(defaultValue);
-
Provider
<Provider value={/* some value */}>
-
Consumer
<Consumer>
{value => /* render something based on the context value */}
</Consumer>
Example
ThemeContext.js
import React From 'react';
export const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export default React.createContext(
themes.dark // default value
);ThemedButton.jsx
import React from 'react';
import ThemeContext, {themes} from './ThemeContext';
export default ({children}) => {
const styles = {
color: themes[theme].foreground,
backgroundColor: themes[theme].background
};
return (
<ThemeContext.Consumer>
{theme => {
return (
<button style={styles}>{children}</button>
)
}}
</ThemeContext.Consumer>
);
}App.js
import React, {PureComponent} from 'react';
import ThemeContext from './ThemeContext';
import ThemeButton from './ThemedButton';
export default class extends PureComponent {
constructor(props) {
super(props);
this.state = {theme: 'dark'};
}
render() {
return (
<ThemeContext.Provider value={this.state.theme}>
<ThemeButton>
<div onClick={() => {
this.setState({theme: this.state.theme === 'dark' ? 'light' : 'dark'})
}}>Themed Button</div>
</ThemeButton>
</ThemeContext.Provider>
);
}
}推荐阅读《React 手稿》
以上是脚本宝典为你收集整理的React手稿 - Context全部内容，希望文章能够帮你解决React手稿 - Context所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。