React手稿 - Context

小翼

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

阅读 1.6k

React 手稿
记录个人在工作和学习中积累的React知识点。

React 第一本手稿级的文档。

5.9k 声望
9.9k 粉丝
0 条评论

React 第一本手稿级的文档。

5.9k 声望
9.9k 粉丝
文章目录
宣传栏