在React中，Context API 提供了一种跨组件共享数据的方法，而不必每次手动传递props。以下是一个使用React Context的简单示例：
首先，创建一个Context对象：
import React from 'react';
export const ThemeContext = React.createContext({
theme: 'light',
toggleTheme: () => {},
});然后，创建一个Provider组件来包裹你的应用，并提供初始状态和状态更新方法：
import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';
const ThemeProvider = props => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{props.children}
</ThemeContext.Provider>
);
};
export default ThemeProvider;在你的根组件中使用ThemeProvider：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ThemeProvider from './ThemeProvider';
ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById('root')
);最后，在任何子组件中，你可以使用useContext钩子来访问共享状态和更新方法：
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
const ThemedButton = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button style={{ backgroundColor: theme === 'light' ? '#fff' : '#000' }} onClick={toggleTheme}>
Toggle Theme
</button>
);
};
export default ThemedButton;这个例子创建了一个简单的主题切换功能，展示了如何使用Context API在React应用中跨组件共享状态。