在TypeScript中将类型分配给React SFC函数声明

Question

因此，您可以将类型分配给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参数，这会有所帮助，因为它将显示我希望从调用方获得的内容（减去childrenprop），但我认为这对调用上下文中的任何智能都无济于事。我也不知道将什么设置为第二个示例的返回类型。

谢谢！

Answer 1

不确定您现在是否已经找到答案，但是向命名函数添加静态类型与您在初始示例中的做法几乎相同

根据您的示例：

//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>;
}

您可以在本文中阅读有关添加类型以响应组件的更多信息

注意：最佳实践是使用React.FC而不是React.SFC因为它现在在最新版本的 React 中已被弃用