打字稿如何在父组件中传递道具
Posted
技术标签:
【中文标题】打字稿如何在父组件中传递道具【英文标题】:Typescript how to pass props in parent component 【发布时间】:2021-06-17 11:11:18 【问题描述】:我正在练习打字。对于 setAuthenticated(valueFromChild) 行,我有错误“类型 'void' 不能分配给类型 'boolean'”,并且“......不能分配给类型 'IntrinsicAttributes & children?: ReactNode; '。”对于我在这里将道具传递给子组件的所有地方(,)。如何修复错误?
import FunctionComponent, useState from 'react';
import BrowserRouter, Switch, Route from 'react-router-dom';
import Navbar from './Components/navbar.component';
import './App.css';
import ThemeProvider from '@material-ui/core/styles';
import theme from './Theme/theme';
import Login from './Components/login.component';
import Register from './Components/register.component';
const App: FunctionComponent = () =>
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
const handleAuth = (valueFromChild: boolean): boolean =>
setIsAuthenticated(valueFromChild);
return (
<ThemeProvider theme=theme>
<BrowserRouter>
<Navbar isAuthenticated=isAuthenticated />
<Switch>
<Route
exact
path="/login"
render=(props) => <Login ...props handleAuth=handleAuth />
/>
<Route
exact
path="/register"
render=(props) => <Register ...props handleAuth=handleAuth />
/>
</Switch>
</BrowserRouter>
</ThemeProvider>
);
;
export default App;
【问题讨论】:
【参考方案1】:const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
const handleAuth = (valueFromChild: boolean): boolean =>
setIsAuthenticated(valueFromChild);
您是说handleAuth
必须返回boolean
。但是调用setIsAuthenticated
会返回void
。您可能只想让handleAuth
返回void
。或者你可以省略返回类型,让 Typescript 正确推断。
const handleAuth = (valueFromChild: boolean): void =>
setIsAuthenticated(valueFromChild);
“...不能分配给类型 'IntrinsicAttributes & children?: ReactNode; '。”对于我在这里将道具传递给子组件的所有地方(,)。
您的组件 Login
和 Register
似乎不接受任何道具。他们接受handleAuth
道具吗?
它们的定义应该类似于:
export interface AuthProps
handleAuth: (value: boolean) => void;
export const Login: React.FunctionComponent<AuthProps> = (handleAuth) => ...
export const Register: React.FunctionComponent<AuthProps> = (handleAuth) => ...
您从(props) =>
传递的道具是RouteComponentProps
,其中包括match
、location
等。您可以将这些包含在您的Login
和Register
组件的道具类型中。但是如果你不需要在组件中使用这些道具,那么你可以不传递它们。
render=() => <Login handleAuth=handleAuth />
【讨论】:
谢谢琳达。以上是关于打字稿如何在父组件中传递道具的主要内容,如果未能解决你的问题,请参考以下文章