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

小编典典

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

reactjs

我已经看到了两种在带有Typescript的React中声明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

从这个问题中]我看到，如果您在组件中使用它，则可以通过第二种方法从界面中忽略子级。

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

阅读 307

2020-07-22

共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很好地总结了这一点。

编辑：请注意，它经常像React.FC<>现在一样被别名。

2020-07-22