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

Question

我正在构建一个按钮组件：

interface ButtonProps {
   startIcon?: ... <-- what type?
}

const Button = ({startIcon: StartIcon}) => {
   return <button>{StartIcon && <StartIcon/>}</button>
}

// usage
<Button startIcon={SomeIcon}/>

我正在使用react-icons库，我应该在接口中声明什么类型？如果我将 svg 元素作为 startIcon 道具传递，它对类型声明有影响吗？

Answer 1

你的图标类型是FunctionComponent这样的，你可以简单地从react库中导入它：

import React, {FunctionComponent} from 'react';
// rest of the codes ...

interface ButtonProps {
  startIcon?: FunctionComponent 
}

可选的

您可以使用简单的console.logandtypeof方法检查变量的类型。

假设这个简单的组件：

const SampleComponent = () => <p>Hello</p>

现在检查类型：

console.log(SampleComponent);
console.log(typeof SampleComponent) // function

现在，检查图标类型（从 react-icons 导入），它与上面的结果完全相似。