React中Context的使用,跨组件传值

在React中，Context API提供了一种无需 prop 就可以在组件树中传递数据的方法。以下是一个使用Context进行跨组件传值的简单例子：

首先，创建一个Context对象：

import React from 'react';
 
export const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
});

然后，在顶层组件中提供Context值：

import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import { ThemeComponent } from './ThemeComponent';
 
const App = () => {
  const [theme, setTheme] = useState('light');
 
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
 
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <ThemeComponent />
      {/* 其他子组件 */}
    </ThemeContext.Provider>
  );
};
 
export default App;

在任何子组件中，你可以通过使用useContext钩子来消费这个Context：

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
 
const ThemeComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
 
  return (
    <div>
      Theme: {theme}
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};
 
export default ThemeComponent;

在这个例子中，我们创建了一个名为ThemeContext的Context，其中包含当前主题和切换主题的函数。在App组件中，我们通过<ThemeContext.Provider>将这些值提供给所有子组件。ThemeComponent组件通过useContext钩子获取这些值，并在用户点击按钮时切换主题。这样，我们就实现了在不同组件之间的跨组件传值。