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

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

1 创建 Context

import React from 'react';

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

2 提供 Context 值

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

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 的方式：

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 的方式（在函数组件中）：

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;

在这个例子中，context.theme 的值是由 App 组件中的 Provider 通过 value 属性提供的，它被设置为 ‘dark’。然后，YourComponent 组件通过 Context.Consumer 或 useContext 来访问这个值，并将其显示在渲染的元素中。

4 不是子组件能通过Consumer获取吗？

Context.Consumer 可以被任何组件使用，无论是子组件还是兄弟组件，甚至是更深层次的后代组件。Context.Consumer 允许你在组件树中任何位置订阅Context的值，只要这个组件位于提供该Context的 Provider 组件之下。