reactjs - 这两种使用 typescript 创建功能组件的方法有什么区别？

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)的 typescript 类型提示，并将正确的类型添加到 children 等 Prop 。

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