/
githubmirror
/
preact
Обзор
Документация
Войти
/
githubmirror
/
preact
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
demo/context.jsx
69 строк
1 KB
Jiawen Geng
feat: migrate demo to vite
08 май 2023, 12:49
08 май 2023, 12:49
e4f3522
Код
Авторство
О чём код?
// eslint-disable-next-line no-unused-vars import { Component, createContext } from 'preact'; const { Provider, Consumer } = createContext(); class ThemeProvider extends Component { state = { value: this.props.value }; onClick = () => { this.setState(prev => ({ value: prev.value === this.props.value ? this.props.next : this.props.value })); }; render() { return ( <div> <button onClick={this.onClick}>Toggle</button> <Provider value={this.state.value}>{this.props.children}</Provider> </div> ); } } class Child extends Component { shouldComponentUpdate() { return false; } render() { return ( <> <p>(blocked update)</p> {this.props.children} </> ); } } export default class ContextDemo extends Component { render() { return ( <ThemeProvider value="blue" next="red"> <Child> <Consumer> {data => ( <div> <p> current theme: <b>{data}</b> </p> <ThemeProvider value="black" next="white"> <Consumer> {data => ( <p> current sub theme: <b>{data}</b> </p> )} </Consumer> </ThemeProvider> </div> )} </Consumer> </Child> </ThemeProvider> ); } }