React手稿 - Context
阿新 • • 發佈:2018-12-22
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 手稿》