[英]React passing props to child component using TypeScript and React Router
我正在尝试使用下面的useState
钩子并将关联的userAuth
和setUserAuth
从App.tsx
到Login.tsx
子组件。
应用程序.tsx
import { lazy, Suspense, useState } from 'react';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import "tailwindcss/tailwind.css";
import * as ROUTES from './constants/routes';
import Login from './screens/Login';
const Home: React.LazyExoticComponent<() => JSX.Element> = lazy(() => import('./screens/Home'));
const App: React.FC = () => {
const [userAuth, setUserAuth] = useState(() => {
const user = localStorage.getItem("userAuth");
return !!user;
});
return (
<div className="App">
<Router>
<Suspense fallback={<p>Loading ...</p>}>
<Switch>
<Route path={ROUTES.HOME} component={Home} exact />
<Route path={ROUTES.LOGIN} component={Login} userAuth={userAuth} setUser={setUserAuth} />
</Switch>
</Suspense>
</Router>
</div>
);
}
export default App;
登录.tsx
interface LoginProps {
userAuth: boolean
setUserAuth: React.Dispatch<React.SetStateAction<boolean>>
};
const Login: React.FC<LoginProps> = ({ userAuth, setUserAuth }) => {
return (
<div className="">
</div>
)
}
export default Login;
我目前在通过路由组件作为道具传递给Login
组件的userAuth
变量上收到以下错误。
No overload matches this call.
Overload 1 of 2, '(props: (RouteProps<"login", {}> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>) | Readonly<RouteProps<"login", {}> & OmitNative<...>>): Route<...>', gave the following error.
Type '{ path: "login"; component: FC<LoginProps>; userAuth: boolean; setUser: Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.
Property 'userAuth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.
Overload 2 of 2, '(props: RouteProps<"login", {}> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>, context: any): Route<{}, "login">', gave the following error.
Type '{ path: "login"; component: FC<LoginProps>; userAuth: boolean; setUser: Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.
Property 'userAuth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.ts(2769)
我正在努力找出导致此错误的原因,并希望得到任何帮助。
通过修改App.tsx
上的路由设置方式解决了这个问题:
<Route path={ROUTES.LOGIN} component={Login} userAuth={userAuth} setUserAuth={setUserAuth} />
并将其更改为:
<Route path={ROUTES.LOGIN}>
<Login userAuth={userAuth} setUserAuth={setUserAuth} />
</Route>
我不确定为什么会这样,但它已经消除了 TypeScript 错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.