因此,您可以指定类型 React.FC<PropsType>到一个变量,以便将其理解为 React 无状态功能组件,如下所示:
//Interface declaration
interface ButtonProps {
color: string,
text: string,
disabled?: boolean
}
// Function Component
let Button: React.FC<ButtonProps> = function(props){
return <div> ... </div> ;
}
但是,我无法理解如何将相同类型分配给作为函数声明构建的 FC:
//Props interface already declared
function Button(props){
render <div> ... </div>;
}
我可以将类型分配给 props参数,并且它会在一定程度上有所帮助,因为它会显示我期望从调用者那里得到什么(减去 children 属性),但我认为这不会对调用上下文中的任何智能感知有帮助。我也不知道将什么设置为第二个示例的返回类型。
谢谢!
请您参考如下方法:
不确定您现在是否找到了答案,但是向命名函数添加静态类型与您在初始示例中的做法几乎相同
根据您的示例:
//Props interface already declared
function Button(props): React.ReactElement<Props> {
render <div> ... </div>;
}
// Or you could store the function in a named variable
const ButtonComponent: React.FunctionComponent<Props> = function Button(props): React.ReactElement<Props> {
render <div> ... </div>;
}
// Using shorthand type
const ButtonComponent: React.FC<Props> = function Button(props) {
render <div> ... </div>;
}
您可以在 article 中阅读有关添加类型以 react 组件的更多信息。
Note: Best practice is to use
React.FCinstead ofReact.SFCsince it's now deprecated in recent versions of React






