react context 跨组件层级传递数据

在 React 里，Context 是一种能跨组件层级传递数据的方式，无需在每个层级都手动传递 props。下面是一个简单示例，展示了怎样用 React Context 跨组件层级传递数据。

APP.js

import React, { createContext, useContext, useState } from 'react';

// 创建一个 Context 对象
const UserContext = createContext();

// 定义一个组件来提供上下文数据
const UserProvider = ({ children }) => {
    const [user, setUser] = useState({ name: 'John Doe', age: 30 });

    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );
};

// 定义一个深层嵌套的组件，它将使用上下文数据
const DeeplyNestedComponent = () => {
    const { user } = useContext(UserContext);

    return (
        <div>
            <h2>User Information</h2>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
        </div>
    );
};

// 定义一个中间组件
const MiddleComponent = () => {
    return (
        <div>
            <DeeplyNestedComponent />
        </div>
    );
};

// 主应用组件
const App = () => {
    return (
        <UserProvider>
            <div>
                <h1>React Context Example</h1>
                <MiddleComponent />
            </div>
        </UserProvider>
    );
};

export default App;    

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);