【react】react 使用 Context 的简单示例

React的Context API是一种在组件树中传递数据的方法，它允许你将数据从顶层组件传递到底层组件，而无需手动在每个层级传递props。

1 创建 Context

javascript">import React from 'react';

// 创建一个Context对象，可以提供一个默认值
const ThemeContext = React.createContext('light'); // 默认主题为'light'

2 提供 Context 值

你需要在组件树中较高层级包裹一个 Provider 组件，并传递一个 value 属性，这样其所有子组件都可以访问这个值。

javascript">import React, { Component } from 'react';
import ThemeContext from './ThemeContext'; // 假设你已经创建了ThemeContext

class App extends Component {
  render() {
    // 这里定义了主题为'dark'
    const theme = 'dark';

    return (
      <ThemeContext.Provider value={theme}>
        <YourComponent /> {/* 任何需要访问主题的组件 */}
      </ThemeContext.Provider>
    );
  }
}

export default App;

3 消费 Context 值

组件可以通过 Context.Consumer 订阅这个值，或者使用 useContext Hook（在函数组件中）来访问。

使用 Context.Consumer 的方式：

javascript">import React, { Component } from 'react';
import ThemeContext from './ThemeContext';

class YourComponent extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => (
          <div>The theme is {theme}</div> // theme 就是从Provider传来的值
        )}
      </ThemeContext.Consumer>
    );
  }
}

export default YourComponent;

使用 useContext Hook 的方式（在函数组件中）：

javascript">import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function YourComponent() {
  const theme = useContext(ThemeContext); // theme 就是从Provider传来的值
  return <div>The theme is {theme}</div>;
}

export default YourComponent;