因此,您可以指定类型 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.FC instead of React.SFC since it's now deprecated in recent versions of React


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!