React官方文档：使用Context减少组件之间通过props传值

本文通过实例展示了如何在React中使用Context API创建可复用的主题管理组件，包括静态上下文、动态主题切换和Provider/Consumer的运用。理解背景色和主题切换的最佳实践，适用于前端开发和组件化设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例1

const BackgroundColorContext = React.createContext('blue');

class Button extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return <button style={{backgroundColor:this.props.backgroundColor}}>my button</button>
  }
}

class ThemedButton extends React.Component {
  static contextType = BackgroundColorContext;
  render() {
    return <Button backgroundColor={this.context} />;
  }
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class FinalComponent extends React.Component {
  render() {
    return (
      <BackgroundColorContext.Provider value="blue">
        <Toolbar />
      </BackgroundColorContext.Provider>
    );
  }
}

示例2：

const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

const ThemeContext = React.createContext(
  themes.dark // 默认值
);

class ThemedButton extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}
ThemedButton.contextType = ThemeContext;

function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  );
}


class FinalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.light,
    };

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
  }

  render() {
    // 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
    // 而外部的组件使用默认的 theme 值
    return (
      <div>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
      </div>
    );
  }
}

示例3：

const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});




class Toolbar extends React.Component {
  render() {
    let props = this.props;
    let theme = this.context;
    return (
      <button
        style={{backgroundColor: theme.theme.background} } onClick={theme.toggleTheme}
      >change my theme</button>
    );
  }
}
Toolbar.contextType = ThemeContext;


/* function Toolbar() {
  // Theme Toggler 按钮不仅仅只获取 theme 值，
  // 它也从 context 中获取到一个 toggleTheme 函数
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );
} */



class FinalComponent extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };

    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };


  }

  render() {
    // 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
    // 而外部的组件使用默认的 theme 值
    return (
      <div>
        <ThemeContext.Provider value={this.state}>
          <Toolbar  />
        </ThemeContext.Provider>
      </div>
    );
  }
}