zoukankan      html  css  js  c++  java
  • React手稿

    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 手稿》

  • 相关阅读:
    bootloader
    Arm中的c和汇编混合编程
    Linux学习笔记(一)
    java按所需格式获取当前时间
    java 串口通信 rxtx的使用
    Tomcat数据库连接池
    面试
    复习 模拟call apply
    复习 js闭包
    复习js中的原型及原型链
  • 原文地址:https://www.cnblogs.com/datiangou/p/10156266.html
Copyright © 2011-2022 走看看