typescript作为prop传递的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.log和typeof方法检查变量的类型。

假设这个简单的组件:

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

现在检查类型:

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

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

Answer 2

我迟到了，但这可能对别人有帮助

你可以在功能组件中定义svg图标的类型，如

export interface IconProps {
style?: StyleProp<ViewStyle>;
fill?: string;
width?: number;
height?: number;
text?: string;
fill_1?: string;
fill_2?: string;
fill_3?: string;
fill_4?: string;
}
interface ButtonProps {
startIcon?: ({ fill, width, height, style }: IconProps) => JSX.Element;
}
const Button = ({startIcon: StartIcon}:ButtonProps) => {
return <button>{StartIcon && <StartIcon/>}</button>
}

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