为什么在 React 和 Typescript 中尝试将用户数据从父组件传递到子组件时，路由配置文件出现错误

Question

当我尝试将用户名从父组件传递给子组件以便在 Header（子）中显示时，我收到错误消息。

如果我尝试将数据从子级传递给父级，则没有问题。 但是，由于项目需要，我必须将用户数据从父母传递给孩子。 我在我的 routeConfig 文件中收到此错误，但我不知道为什么：

这是子组件：

 interface DashboardHeaderProps { username: string; } const DashboardHeader = ({ username }: DashboardHeaderProps): JSX.Element => { const classes = styles.dashboardHeaderStyles(); return ( <Box className={classes.container}> <Box> <Typography className={classes.welcomeText}>Hello {username}, welcome back.</Typography> </Box> <Box className={classes.logoutContainer}> <CustomIcon className={classes.userIcon} icon={icons.userMenu} /> <Link className={classes;logoutText} onClick={() => logout()}> Logout </Link> </Box> </Box> ); }; export default DashboardHeader;

这是父组件：

 import { ILoggedInUserData } from "store/slice/auth/authSlice.types"; interface DashboardProps { loggedInUserData: ILoggedInUserData; } const PaceLabsDashboard = ({ loggedInUserData }: DashboardProps): JSX.Element => { // const [loggedInUserData, setLoggedInUserData] = useState<ILoggedInUserData>(); console.log(loggedInUserData.name); return ( <Box> {/* Header */} <Box sx={{ width: "100%", height: "72px" }}> <DashboardHeader username={loggedInUserData.name} /> </Box> <Grid container sx={{ display: "flex", height: "900px", width: "100%", textAlign: "center" }}> {/* Right content */} <Grid item sx={{ border: "2px solid black", width: "70%" }}> <LeadershipProfile /> </Grid>

以及出现错误的行的路线文件：

 { path: "/my-dashboard", element: <PaceLabsDashboard />, }

Answer 1

在 PaceLabsDashboard 组件中，您正在使用名为 LoggedinUserdata.. 的道具进行类型检查。

PaceLabsDashboard 需要将 loggedinuserdata 作为 Props 传递。

  {
        path: "/my-dashboard",
        element: <PaceLabsDashboard loggedinuserdata={\\ structure of ILoggedInUserData} />,
 }