我注意到一些开发人员像这样输入react js的功能组件:
const Result: React.FC<ResultProps> = ({ prop1, prop2 }: ResultProps) => {
我不明白这个想法，为什么他们使用ResultProps2次。以这种方式输入组件是不够的:
const Result: React.FC<ResultProps> = ({ prop1, prop2 }) => {
?
这两种打字方式有什么区别?我尝试了两种实现，得到了相同的结果。
这样输入组件是不够的:
是的，够了。你不需要重复的类型的道具，这是很好的:
const Result: React.FC<ResultProps> = ({ prop1, prop2 }) => {
// ...
};
操场上联系
可以工作，因为你已经设置了Result的类型，所以TypeScript知道函数接受什么参数和它们的类型。
关于React.FC的说明:在React v17的类型中。x及以下，当您为组件使用React.FC时，您说它支持子组件。你的组件不支持孩子，所以我想我应该说出来。许多人开始说不要使用React.FC正是出于这个原因:它很容易意外地给组件提供错误的类型信息。但是在React v18中。x及以上版本，他们更改了React.FC的定义，因此它不再假设您的组件支持子组件。(如果你想说它有，你可以像这样添加PropsWithChildren:React.FC<PropsWithChildren<ResultProps>>。)
所以如果你使用v17。如果你不想让组件在不支持子元素的情况下显示它支持子元素，那么这里有一种你经常看到的替代方法:
const Result = ({ prop1, prop2 }: ResultProps) => {
// ...
};
操场上联系
请注意，这依赖于你从组件返回正确的东西，因为TypeScript没有返回类型注释可以用来帮助你，如果你忘记返回某个东西或者返回某个对组件无效的东西(比如返回一个普通对象)。所以你也可以包括一个返回类型:
const Result = ({ prop1, prop2 }: ResultProps): JSX.Element => {
// ...
};
操场上联系
但是，在React v18的类型中。x,React.FC不再假设您的组件支持子组件。