这两种定义React.FunctionalComponent中props 的方式有什么显著的区别吗？
interface Props {
username: string,
age: number
}
const UserPanel: React.FunctionComponent = (props: Props) => (
<div>{props.username}</div>
);
const UserPanel: React.FunctionComponent<Props> = (props) => (
<div>{props.age}</div>
);
是的，有一个非常显著的区别:第一种 Select 是丢弃类型信息.
右侧的函数包括有关props 的信息，但随后您将其赋给一个没有该信息的变量.UserPanel‘S类型使用默认props {}，因此任何使用用户面板的人都不能传递任何props .try 传递用户名props 或年龄props 将引发错误.例如:
const UserPanel: React.FunctionComponent = (props: Props) => (
<div>{props.username}</div>
);
const SomeOtherCmponent = () => {
// Error: Type '{ username: string; age: number; }' is not assignable to type 'IntrinsicAttributes'.
return <UserPanel username="foo" age={100}/>
}
您需要 Select 第二个选项:
const UserPanel: React.FunctionComponent<Props> = (props) => (
<div>{props.age}</div>
);
或者你需要这样做:
const UserPanel = (props: Props) => (
<div>{props.age}</div>
);