reactjs - 我应该如何在 React 中使用 Typescript 声明无状态功能组件？

Question

我见过两种在 React with Typescript 中声明 SFC 的方法，它们是这两种:

import * as React from 'react'

interface Props {
  message: string
}

const Component = (props: Props) => {
  const { message } = props
  return (
    <div>{message}</div>
  )
}

export default Component

和:

import * as React from 'react'

interface Props {
  message: string
}

const Component: React.StatelessComponent<Props> = props => {
  const { message } = props
  return (
    <div>{message}</div>
  )
}

export default Component

来自 this question我看到如果您在组件中使用第二种方式，您可以从界面中省略子项。

还有什么区别吗？哪一个是首选？为什么？

Answer 1

看起来像React.SFC和 React.StatelessComponent已弃用。

使用 React.FunctionComponent相反:

import * as React from 'react'

interface IProps {
  text: string
}

export const MyComponent: React.FunctionComponent<IProps> = ({ text }: IProps): JSX.Element =>
<div>{text}</div>

从技术上讲，这个名称并不意味着与 Dan Abramov summed up nicely 相同的东西

编辑:请注意，它的别名通常为 React.FC<>现在。