作为“组件”道具传递的链接组件的类型

Question

我有一个函数组件（带有 TypeScript），假设它被称为 Button。我从 Material-UI 将 Button 作为 BaseButton 导入，对其进行样式设置，添加一些很酷的功能（我在此处删除了不必要的代码）并将其导出为我自己的 Button。后来，当我在代码中的某处使用这个导出的按钮并希望将链接组件（从 react-router-dom 导入）作为“组件”道具传递给这个按钮时。我应该在 ButtonProps 界面中使用什么类型？另外，'to' 属性是否应该指定为字符串？

component/button.tsx

import * as React from 'react';
import { Button as BaseButton } from '@material-ui/core';

interface ButtonProps {
  component: ???;
  to: string;
}

export const Button: React.FC<ButtonProps> = ({ component, to }) => (
  <BaseButton component={component} to={to} />
)

.

some other place

import { Button } from 'components/button';
import { Link } from 'react-router-dom';

(...)
  <Button component={Link} to={'/'} />
(...)

Answer 1

标签不是可视组件，而是为添加导航功能而制作的包装器， material-ui 是相反的用途 因此像这样的东西应该导航

---

    export const Button: React.FC<ButtonProps> = ({ to }) => 
      <Link to={to}
        <BaseButton /> // your own styled compnent
      </Link>
     )

---