【react】react 使用 Context 的简单示例
React的Context API是一种在组件树中传递数据的方法，它允许你将数据从顶层组件传递到底层组件，而无需手动在每个层级传递props。
目录
- 1 创建 Context
- 2 提供 Context 值
- 3 消费 Context 值
- 4 不是子组件能通过Consumer获取吗？
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'; // 假设你已经创建了ThemeContextclass 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 组件之下。