javascript - 与嵌套组件共享上下文，未定义获取 UserContext

Question

我正在尝试将某种服务共享给嵌套在另一个组件中的组件，但出现未定义的错误。

'UserContext' is not defined no-undef

这是我的 App.js:

import logo from './logo.svg';
import './App.css';
import React, {createContext} from "react";
import {
    BrowserRouter as Router,
    Routes,
    Route
} from "react-router-dom";
import TopPanel from "./components/topPanel/TopPanel";
import UserCtx from "./services/UserCtx";

function App() {

    const UserContext = createContext({});

    return (
        <Router>
            <UserContext.Provider value={new UserCtx()}>
                <TopPanel/>
            </UserContext.Provider>
            <Routes>
                ...
            </Routes>
        </Router>
    );
}

export default App;

在 TopPanel 组件内部有一个 Login 组件，它应该使用上下文:

import React, {useState, useContext} from "react";

function Login() {

    const userCtx = useContext(UserContext);

    ...
}

export default Login;

但它显然没有得到传递。请问我做错了什么？它甚至看起来都不像传递给 1 级组件。

不认为它是相关的，但这是上下文对象:

import React from "react";

class UserCtx {

    isLoggedIn;
    token;

    constructor() {
        this.isLoggedIn = false;
    }

    logIn = (token) => {
       console.log("LOGGING IN!");
       this.isLoggedIn = true;
       this.token = token;
    }
}

export default UserCtx;

Answer 1

上下文的创建应该在组件之外，这行 const UserContext = createContext({}); 应该在 App 组件之外，它应该将其导出:

export const UserContext = createContext({});

确保在 Login 中，在顶部导入 UserContext，然后再执行您在那里的操作:

import React, {useState, useContext} from "react";
import {UserContext} from "../../App"; // use the correct path

function Login() {

    const userCtx = useContext(UserContext);

    ...
}

export default Login;