react context toggleButton demo
阿新 • • 發佈：2018-12-22
//toggleButton demo:
//code:
//1.Appb.js:
import React from 'react'; import {ThemeContext, themes} from './theme-context'; import ThemeTogglerButton from './theme-toggler-button'; class Appb extends React.Component { constructor(props) { super(props); this.toggleTheme = () => {this.setState(state => ({ theme: state.theme === themes.dark ? themes.light : themes.dark, })); }; // State 包含了 updater 函式 所以它可以傳遞給底層的 context Provider this.state = { theme: themes.light, toggleTheme: this.toggleTheme, }; } render() {// 入口 state 傳遞給 provider return ( <ThemeContext.Provider value={this.state}> <Content /> </ThemeContext.Provider> ); } } function Content() { return ( <div> <ThemeTogglerButton /> </div> ); } export default Appb
import {ThemeContext} from './theme-context';
import React from 'react';
function ThemeTogglerButton() {
// Theme Toggler 按鈕不僅接收 theme 屬性
// 也接收了一個來自 context 的 toggleTheme 函式
return (
<ThemeContext.Consumer>
{({theme, toggleTheme}) => (
<button
onClick={toggleTheme}
style={{backgroundColor: theme.background}}>
Toggle Theme
</button>
)}
</ThemeContext.Consumer>
);
}
export default ThemeTogglerButton;
//3.theme-context.js:
// 確保預設值按型別傳遞 // createContext() 匹配的屬性是 Consumers 所期望的 import React from 'react'; export const themes = { light: { foreground: '#ffffff', background: '#222222', }, dark: { foreground: '#000000', background: '#eeeeee', }, }; export const ThemeContext = React.createContext({ theme: themes.dark, toggleTheme: () => {}, });