无法使用 PrimeReact Context 中的“changeTheme”

Question

我正在尝试使用prime React网站上记录的changeTheme功能这里

我设置了一个非常基本的在线沙箱这里

    //CSS
    import "./App.css";
    import { useContext } from "react";
    import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
    import { PrimeReactContext } from "primereact/api";
    import LoginPage from "./components/Loginpage";

    //Prime React styles
    import "primeflex/primeflex.css";
    import "primereact/resources/themes/lara-light-indigo/theme.css";
    import "primereact/resources/primereact.min.css";
    import "primeicons/primeicons.css";

    function App() {
        const {changeTheme} = useContext(PrimeReactContext);
          return (
            <div className="App">
                <Router>
                <Routes>
                    <Route path="/" element={<LoginPage />} />
                </Routes>
              </Router>
           </div>
        );
    }

    export default App;

线路

   const {changeTheme} = useContext(PrimeReactContext);

抛出错误

 Uncaught TypeError: Cannot destructure property 'changeTheme' of 'useContext(...)' as it is undefined.

我尝试与作者联系以了解他们的不和谐之处，并在此处和其他地方在线搜索。

Answer 1

您可以通过在

PrimeReactProvider

 中添加 

index.jsx

来解决此问题

index.jsx

import { PrimeReactProvider } from "primereact/api";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <PrimeReactProvider>
      <App />
    </PrimeReactProvider>
  </StrictMode>,
);

注意：

useContext()

组件中的调用不受同一组件返回的提供程序的影响。相应的

<Context.Provider>

需要位于执行

useContext()

调用的组件上方。

参考：https://react.dev/reference/react/useContext