类型“IntrinsicAttributes”上不存在属性“组件”

时间:2020-12-27 09:07:27

标签: reactjs typescript material-ui

我有以下无法编译的组件:

export default function MobileNav({routes, currentRouteIndex, handlePressedRoutedIndex}: MobileNavProp) {

   ...

    return (
        <React.Fragment>
            ...
            ...
                    {
                        routes.map((rt, index) => (
                            <ListItem
                                divider
                                key={index}
                                button
                                component={Link}
                                to={rt.path}
                                selected={index === currentRouteIndex}
                                onClick={handleOnClickItem(index)}
                            >
                                <ListItemText primary={rt.name}/>
                            </ListItem>
                        ))
                    }
                </List>

            </SwipeableDrawer>
        </React.Fragment>
    )
}

路由定义如下:

const routes: RoutesTable = [
      {name: "HOME", path: "/"},
      {name: "HOW IT WORKS", path: "/howitworks"},
      {name: "ABOUT US", path: "/aboutus"}
  ]

编译器抱怨:

No overload matches this call.
  The last overload gave the following error.
    Type '{ children: Element; divider: true; key: number; button: true; component: <S = unknown>(props: LinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<...> | null; to: string; selected: boolean; onClick: (event: MouseEvent<...>) => void; }' is not assignable to type 'IntrinsicAttributes & { button: true; } & { alignItems?: "center" | "flex-start" | undefined; autoFocus?: boolean | undefined; button?: boolean | undefined; ... 7 more ...; selected?: boolean | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { button: true; } & { alignItems?: "center" | "flex-start" | undefined; autoFocus?: boolean | undefined; button?: boolean | undefined; ... 7 more ...; selected?: boolean | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.  TS2769

    87 |                                 key={index}
    88 |                                 button
  > 89 |                                 component={Link}
       |                                 ^
    90 |                                 to={rt.path}
    91 |                                 selected={index === currentRouteIndex}
    92 |                                 onClick={handleOnClickItem(index)}

我做错了什么?

0 个答案:

没有答案