使用打字稿创建功能组件的这两种方法有什么区别?

Question

>我搜索以找出这两个功能组件之间的区别：

interface SquareProps {
cote: string;
text: string;
bgc: string;
}
const SquareA: React.FC<SquareProps> = (props) => {...}

和

const SquareB: = (props: SquareProps) => {...}

使用第一种解决方案或第二种解决方案有什么区别？

Answer 1

最好的™方法是在键入功能组件时使用React.FC。

它提供了有关特殊属性(如defaultProps和displayName(的打字稿类型提示，并将正确的类型添加到children等道具中。

这两种方式都可以创建有效的功能组件，但第一种方式的类型更准确，因此不太可能被滥用并提供更好的代码完成。