使用组件有什么区别.PropTypes和接口

Question

在创建react组件时，我可以在这两种方法中定义类型，但我想知道这两种之间的区别，

方法1

const MyComponent:React.FC<IProps> = () => (<></>)
interface IProps {
Title: string
}

方法2

const MyComponent:React.FC = () => (<></>)
MyComponent.propTypes = {
Title: string
}

这两种类型定义之间的区别是什么。

当我尝试的时候，我犯了一个错误

在方法一中，我尝试添加

const MyComponent:React.FC<IProps> = () => (<></>)
interface IProps {
Title: React.FC
}

但是，在将相同的东西添加到proptype时，它出现了错误

const MyComponent:React.FC = () => (<></>)
MyComponent.propTypes = {
Title: React.FC
}

Answer 1

propTypes与TypeScript无关；这是React和某些React工具所知道的运行时/lint时间检查。

允许的道具类型与TypeScript类型系统是分开的，这就是为什么在propTypes中使用React.FC是一个错误。

(MyComponent.propTypes = {Title: string}也不正确，但不会导致错误——只是实际的propTypes是{Title: undefined}，这没有帮助。(

此外，您不希望使用React.FC，除非您的组件接受children道具(即便如此，您也可以只使用React.PropsWithChildren<IProps>(。

IOW，

interface Props {
title: string;
}
function MyComponent({title}: Props) {
return <h1>{title}</h1>;
}

就足够了，并且为MyComponent提供了编译时类型检查。