Question

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

还有其他差异吗？哪一个是首选的，为什么？

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

并不相同。

Answer 2

首选的是React.SFC：

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代表无状态功能组件。

关于你的第一次考试，考虑到已经完成并且＃34;手动＆＃34;它有一些问题。例如，它不能指向props.children，因为它没有在您的界面中定义。你没有React.SFC的这个问题。

（请注意，无状态功能组件，功能组件和无状态组件似乎意味着相同但实际上有3种不同的事物https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components/。）

鉴于您正在寻找无状态功能组件，React.SFC正是您要走的路。其他选项可能不起作用或可能不是状态，或者可能无法满足正确的Component接口（如手动示例）。

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

Answer 3

React.StatelessComponent<T>的{p> The definition是：

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的属性）

Answer 4

宣布Sub Macro1() If Not Intersect(ActiveCell, Sheets("Rep").Range("D2:D5000")) Is Nothing Then Sheets("Aux").Range("A2").Value = ActiveCell.Value End Sub时你基本上声明了这个函数得到了什么，以及它返回的内容：

const Component: React.StatelessComponent<Props>

为了便于阅读，我实际上会这样做：

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

因为在这里，查看此代码的开发人员不需要知道const Component = (props: Props): JSX.Element => {的接口是什么 - 他只能阅读内容和内容。

基本上，这一切都很大：

StatelessComponent

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

4 个答案: