如何将返回类型设置为React.StatelessComponent？

Question

这有效：

import * as React from 'react';

export default (props: any): JSX.Element => {
  return (
    <h1>{props.children}</h1>
  )
}

这会引发错误：

import * as React from 'react';

export default (props: any): React.StatelessComponent => {
  return (
    <h1>{props.children}</h1>
  )
}

如何将返回类型设置为React.StatelessComponent？

Answer 1

不使用默认导出，它是一种反模式。

import * as React from 'react';

export const MyComponent: React.StatelessComponent = (props) => <h1>{props.children}</h1>

请注意，我还删除了return关键字和花括号，因为它具有箭头功能，除了返回JSX之外没有其他作用

Answer 2

实际上，您需要拆分组件及其导出：

const MyComp: SFC<{}> = (props: any) => {
  return (
    <h1>{props.children}</h1>
  )
}

export default MyComp

Answer 3

要声明并强制执行同一条语句-您可能必须使用as设置组件的类型。

请参见下面的实际示例。

// Types.
type Props = any

// Export.
export default (props => 
  <h1>{props.children}</h1>
) as React.StatelessComponent<Props>