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

  • 相关阅读:
    Java-集合类源码List篇(二)
    规范输入
    Java 构造方法
    c语言函数实现交换两个数的值
    2015北京宇信易诚科技面试题
    Java中的访问控制
    2015大连华信校园招聘面试题--堆栈
    2015大连华信面试题OSI七层模型
    2015大连华信面试题二叉树、遍历
    2015大连华信面试题MVC框架
  • 原文地址:https://www.cnblogs.com/datiangou/p/10156266.html
Copyright © 2011-2022 走看看