React手稿 - Context

2024年5月18日 134次阅读来源: 小翼

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>
    );
  }
}

在线示例