尝试创建 React 可修改上下文无法实例化提供程序答案

【问题标题】：Attempt to create React modificable context fails to instantiate provider尝试创建 React 可修改上下文无法实例化提供程序
【发布时间】：2022-10-06 16:14:56
【问题描述】：

我想在我的 React 应用程序中将身份验证信息作为上下文处理，所以我关注 this tutorial 来实现一个可以从组件树中更新的上下文。到目前为止，这是我的代码：

应用程序/authContext/index.tsx

import * as React from \"react\";

export interface IAuth {
  user: string | null;
}
export type AuthContextType = {
  auth: IAuth;
  setAuth: (auth: IAuth) => void;
}

export const auth = {
  user: \"username\",
}

export const AuthContext = React.createContext<AuthContextType | null>(null);

const AuthContextProvider: React.FC<React.ReactNode> = ({children}) => {
  const [auth, setAuth] = React.useState<IAuth> ({user: null});

  const saveAuth = (auth: IAuth) => {
    setAuth(auth);
  }

  return <AuthContext.Provider value={{auth, saveAuth}}>{children}</AuthContext.Provider>;
}

export default AuthContextProvider;

应用程序/index.tsx

import React from \'react\';
import { ThemeProvider } from \'@mui/material/styles\';
import { Routes, Route } from \"react-router-dom\";

import \'./App.css\';
import {mayan} from \"./themes/mayan\";
import AppHeader from \'./appHeader\';

import AuthContextProvider, { auth } from \"./authContext\";

import Home from \"./Routes/home\";
import Login from \"./Routes/login\";

function App() {
  return (
    <ThemeProvider theme={mayan}>
      <AuthContextProvider>    <<<< ---------- Error line
        <div className=\"App\">
          <AppHeader />
          <header className=\"App-body\">
            <Routes>
              <Route path=\"/\" element={<Home />} />
              <Route path=\"login\" element={<Login />} />
            </Routes>
          </header>
        </div>
      </AuthContextProvider>
    </ThemeProvider>
  );
}

export default App;

问题是在实例化 <AuthContextProvider> 组件时，我收到以下错误：

TS2322: Type \'{ children: Element; }\' is not assignable to type \'IntrinsicAttributes & ReactNode\'.
  Type \'{ children: Element; }\' is missing the following properties from type \'ReactPortal\': key, type, props
    15 |   return (
    16 |     <ThemeProvider theme={mayan}>
  > 17 |       <AuthContextProvider>
       |        ^^^^^^^^^^^^^^^^^^^
    18 |         <div className=\"App\">
    19 |           <AppHeader />
    20 |           <header className=\"App-body\">

我不知道教程是错误的还是我遗漏了一些东西。

标签： reactjs typescript react-hooks react-context

【解决方案1】：

据我了解，使用React.FC 有点失宠。 Typescript 已经改进到可以理解 React 组件是什么以及它返回什么的程度。它需要知道的是传递给它的内容。在这种情况下，它只是一个children 道具，所以使用React.PropsWithChildren<{}>。如果您已经有其他道具和道具接口，请使用React.PropsWithChildren<IProps>。

例子：

export interface IAuth {
  user: string | null;
}

export type AuthContextType = {
  auth: IAuth;
  saveAuth: (auth: IAuth) => void;
};

export const auth = {
  user: "username"
};

export const AuthContext = React.createContext<AuthContextType | null>(null);

const AuthContextProvider = ({
  children
}: React.PropsWithChildren<{}>) => {
  const [auth, setAuth] = React.useState<IAuth>({ user: null });

  const saveAuth = (auth: IAuth) => {
    setAuth(auth);
  };

  return (
    <AuthContext.Provider value={{ auth, saveAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

【讨论】：

【解决方案2】：

您在 React 组件上的类型只是有点错误。您可以使用以下方法修复它：

React.FC<{ children: React.ReactNode }>

【讨论】：