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

Question

我想在React应用程序中将身份验证信息作为上下文处理，因此我将按照本教程实现一个可以从组件树中更新的上下文。这是我迄今为止的代码：

app/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;

app/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">

我不知道是教程错了还是我遗漏了什么。

Answer 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>
);
};

Answer 2

React组件上的类型有点错误。你可以使用这个修复它：

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