如何使用context
- 创建context对象
import React from 'react'
export const AppContext = React.createContext()
- 把想要用
context的数据的节点使用context.Provider进行包裹，并且传入对应的数据。
<AppContext.Provider value={{
state: this.state,
actions: this.actions,
}}>
<Router>
<div className="App">
<div className="container pb-5">
<Route path="/" exact component={Home} />
<Route path="/create" component={Create} />
<Route path="/edit/:id" component={Create} />
</div>
</div>
</Router>
</AppContext.Provider>
- 把想要使用context的组件的地方，使用
Context.Consumer包裹起来，返回一个函数表达式，函数的参数就是我们传入的值。
<AppContext.Consumer>
{({ state, actions }) => {
return <Component {...props} data={state} actions={actions} />
}}
</AppContext.Consumer>
何时使用context
Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。有的时候在组件树中很多不同层级的组件需要访问一批数据。
Context 能让你将这些数据向组件树下所有的组件进行“广播”，所有的组件都能访问到这些数据，也能访问到后续的数据更新。
举个栗子：
1. 我们在实现多语言程序的时候，可以将语言文件在根组件通过context传递给各个组件
export const languageContext = React.createContext();
const chLanguage = {
'button': '按钮'
}
class App extends React.Component {
render() {
return (
<languageContext.Provider language={chLanguage}>
<Toolbar />
<Button />
</languageContext.Provider>
);
}
ToolbarContext.js
<languageContext.Consumer>
{({ language }) => {
return <button>{language[button]</button> />
}}
</languageContext.Consumer>
- 主题动态调整
theme-context.js
export const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const ThemeContext = React.createContext(
themes.dark // 默认值
);
themed-button.js
import {ThemeContext} from './theme-context';
class ThemedButton extends React.Component {
render() {
let props = this.props;
let theme = this.context;
return (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
);
}
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;
App.js
import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';
// 一个使用 ThemedButton 的中间组件
function Toolbar(props) {
return (
<ThemedButton onClick={props.changeTheme}>
Change Theme
</ThemedButton>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: themes.light,
};
this.toggleTheme = () => {
this.setState(state => ({
theme:
state.theme === themes.dark
? themes.light
: themes.dark,
}));
};
}
render() {
// 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
// 而外部的组件使用默认的 theme 值
return (
<Page>
<ThemeContext.Provider value={this.state.theme}>
<Toolbar changeTheme={this.toggleTheme} />
</ThemeContext.Provider>
<Section>
<ThemedButton />
</Section>
</Page>
);
}
}
ReactDOM.render(<App />, document.root);
