打字稿如何在父组件中传递道具

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; '。”对于我在这里将道具传递给子组件的所有地方(,)。

您的组件 LoginRegister 似乎不接受任何道具。他们接受handleAuth 道具吗?

它们的定义应该类似于:

export interface AuthProps 
  handleAuth: (value: boolean) => void;


export const Login: React.FunctionComponent<AuthProps> = (handleAuth) =>  ...

export const Register: React.FunctionComponent<AuthProps> = (handleAuth) =>  ...

您从(props) =&gt; 传递的道具是RouteComponentProps,其中包括matchlocation 等。您可以将这些包含在您的LoginRegister 组件的道具类型中。但是如果你不需要在组件中使用这些道具,那么你可以不传递它们。

render=() => <Login handleAuth=handleAuth />

【讨论】:

谢谢琳达。

以上是关于打字稿如何在父组件中传递道具的主要内容,如果未能解决你的问题,请参考以下文章

反应导航:如何在打字稿中使用 NavigationStackScreenComponent 类型传递 redux 道具

需要至少一个道具传递给组件[打字稿] [重复]

svg 组件的打字稿正确类型作为道具传递

在打字稿中将 useState 作为道具传递

通用打字稿组件继承组件道具

从 makeStyles 切换到 mui5 sx 道具-打字稿错误(没有重载匹配此调用)传递具有位置的对象