reactjs - Material-ui 的 CardActionArea 组件属性的打字稿错误

Question

Material-ui按钮 | 第三方路由库文档指出，我们需要让适配器将react-router-dom/Link组件封装到 Button 中。但是对 a CardActionArea（根据文档，这是一个 BaseButton）执行相同操作会产生以下 Typescript 错误：

main.tsx:24:10 - error TS2322: Type '{ children: Element; component: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>; to: string; }' is not assignable to type 'IntrinsicAttributes & CardActionAreaProps & { children?: ReactNode; }'.
  Property 'component' does not exist on type 'IntrinsicAttributes & CardActionAreaProps & { children?: ReactNode; }'.

14         <CardActionArea component={AdapterLink} to="/foo">
            ~~~~~~~~~~~~~~

该代码仍然有效。这是一个显示第 14 行错误消息的最小示例：

注意：第 6 行有一个错误，因为 Codesandbox 在 TypeScript 文件中运行 eslint，所以忽略它。

https://codesandbox.io/s/heuristic-bash-w17bu

标签： reactjstypescriptmaterial-uireact-router-dom

Answer 1

这对我有用，我在 TypeScript 中没有错误：

<CardActionArea {...{ component: Link, to }}>