Question

因此，您可以为变量分配类型React.SFC<PropsType>，以便将其理解为React无状态功能组件，如下所示：

//Interface declaration
interface ButtonProps {
  color: string,
  text: string,
  disabled?: boolean
}

// SFC
let Button: React.SFC<ButtonProps> = function(props){
  return <div> ... </div> ;
}

但是，我很难理解如何将相同类型分配给作为函数声明构建的SFC：

//Props interface already declared
function Button(props){
  render <div> ... </div>;
}

我可以将类型分配给props参数，这会有所帮助，因为它将显示我希望从调用者那里得到的结果（减去children道具），但是我不认为这将有助于调用上下文中的任何智能感知。我也不知道将第二个示例的返回类型设置为什么。

谢谢！

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

您可以在article

中阅读有关添加类型以对组件进行反应的更多信息。

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

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

1 个答案: