react Context学习记录

import React from 'react';
 
// 创建一个React Context对象
const ThemeContext = React.createContext();
 
// 使用高阶组件包装需要访问上下文的组件
const withTheme = Comp => props => (
  <ThemeContext.Consumer>
    {theme => <Comp {...props} theme={theme} />}
  </ThemeContext.Consumer>
);
 
// 使用Context.Provider在应用的顶层组件提供主题
class App extends React.Component {
  state = {
    theme: 'light'
  };
 
  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
 
// Toolbar组件使用Context
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}
 
// ThemedButton组件使用高阶组件获取主题
const ThemedButton = withTheme(props => (
  <button style={{ background: props.theme === 'dark' ? '#333' : '#fff' }}>
    I am styled by theme context!
  </button>
));
 
export default App;

这个代码示例展示了如何在React应用中创建和使用Context来共享数据。我们创建了一个名为ThemeContext的Context对象，并在App组件中通过Provider组件提供了一个主题（light或dark）。Toolbar组件中的ThemedButton使用了withTheme高阶组件来获取当前主题，并根据主题设置按钮的样式。这是一个很基础的例子，但展示了Context API的使用方法。