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

IT技术 reactjs typescript
2021-05-12 09:38:22

我见过两种在 React 中使用 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我看到,如果您在组件中使用它,则可以通过第二种方式从界面中省略子项。

还有更多区别吗?哪一个是首选,为什么

4个回答

看起来像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<>现在。

定义React.StatelessComponent<T>如下:

interface StatelessComponent<P> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any>;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

在您的 for 代码段Component中,编译器推断为:

(props: Props): ReactElement<any>

(或类似的东西)。

如果你像这样写第一个:

const Component = (props: Props & { children?: ReactNode }) => {
    ...
}

你几乎得到了同样的东西(只要你不使用 Component 的属性)

当你声明const Component: React.StatelessComponent<Props> 你基本上是在声明这个函数得到什么,它返回什么:

interface StatelessComponent<P> { (props: P ... ): ReactElement<any>;

所以为了可读性,我实际上会这样做:

const Component = (props: Props): JSX.Element => {

因为在这里查看这段代码的开发人员不需要知道什么是接口StatelessComponent——他可以只读取输入和输出的内容。

基本上,这是一个很大的:

const Component: React.StatelessComponent<Props> = (props: IProps): JSX.Element =>

更新:阅读 React Hooks 更新的最后一部分

首选的是 React.SFC(React 16.7 之前):

import * as React from 'react'

interface Props {
  message: string
}

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

export default MyComponent

为什么?

SFC 代表无状态功能组件。

关于你的第一个例子,鉴于它是“手动”完成的,它有一些问题。例如,它不能指向 props.children,因为它没有在您的界面中定义。React.SFC 没有这个问题。

(注意 Stateless Functional Component、Functional Component 和 Stateless Component 似乎意思相同,但实际上是 3 种不同的东西(Functional Components vs. Stateless Functional Components vs. Stateless Components

鉴于您正在寻找无状态功能组件,React.SFC 正是您要走的路。其他选项可能不起作用或可能没有状态,或者可能无法实现正确的 Component 接口(如您的手动示例)。

编辑:自 React Hooks 到来以来的更新:

由于 React hooks 到来,函数组件也可以有内部状态,所以现在区分更小了。现在功能组件(有状态或无状态)的首选方式是React.FunctionComponent

const MyComponent: React.FunctionComponent<Props> = props => {
  // ... Same as above
}

干杯,来自玻利维亚的拉巴斯。