Question

这里的返回类型是什么？

const Foo
  : () => // ???
  = () => (
    <div>
      Foobar
    </div>
  )

Answer 1

this answer中提到的StatelessComponent类型已被弃用，因为在引入了Hooks API之后，它们并不总是无状态的。

功能组件的类型为React.FunctionComponent，并且具有别名React.FC以使内容简洁明了。

它具有一个必需的属性，即一个函数，该函数将返回ReactElement或null。它具有一些可选属性，例如propTypes，contextTypes，defaultProps和displayName。

这是一个例子：

const MyFunctionComponent: React.FC = (): ReactElement => {
  return <div>Hello, I am a function component</div>
}

这是@ types / react 16.8.24中的类型：

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

Answer 2

此处的正确返回类型为ReactElement<P>，但更好的选择是使用此类React.StatelessComponent<P>

const Foo
  : React.StatelessComponent<{}>
  = () => (
    <div>
      Foobar
    </div>
  )

Answer 3

请参阅https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

每个JSX元素只是用于调用React.createElement（component，props，... children）的语法糖。

function createElement<P extends DOMAttributes<T>, T extends Element>(
    type: string,
    props?: ClassAttributes<T> & P,
    ...children: ReactNode[]): DOMElement<P, T>;

所以它是DOMElement<P, T>

Answer 4

我还要添加.SFC，它代表无状态功能组件。

const Foo
  : React.SFC<{}>
  = () => (
    <div>
      Foobar
    </div>
  )

Answer 5

interface ISomeCoolInterface {
   some: 'string';
   cool: 'string';
   props: 'string' 
}    

const SomeCoolComponent
    : React.FC<ISomeCoolInterface> 
    = ({ some, cool, props }): JSX.Element => {
        return <SomeCoolComponent>{some, cool, props}</SomeCoolComponent>      
    }

这里重要的一点是返回类型JSX.Element

Answer 6

如果使用 SQL NULL 关键字，最佳返回类型似乎是 function。

目前我们的团队使用 JSXNode 作为速记，因为只有这两种类型可以直接作为 JSX 结果返回：

JSX.Element | null

编辑：看起来 React.ReactNode 最终是 JSX 的预期返回类型，但目前不可能。 (JSR-221)

背景：

这里的答案似乎都没有解决最常见的现代情况 - 您有一个返回元素的函数。这应该返回什么类型？

type JSXNode = JSX.Element | null;

推荐的隐藏组件的方法是Reference，所以不清楚返回类型是什么。输入 JSX.Element | null 无处不在，甚至制作这样的自定义类型似乎没有必要考虑到这种情况的普遍性。 ReactNode 也不起作用，因为 undefined 不能作为 JSX 返回。

总的来说，最好的返回类型似乎是 function MyComponent(): SomeTypeHere { return <>...</>; }。这是 JSX.Element | null 类型的返回类型，如果您不使用 FC 关键字：

function

什么是React无状态组件的TypeScript返回类型？

6 个答案:

背景：