React + Typescript:没有状态/没有道具的React组件的类型

Question

我已经看过使用Typescript的React组件的多个示例:

class Foo extends React.Component<IProps, IState> {}

当我们不使用道具或国家时,似乎没有明确的约定.

人设这些类型any,null,undefined,{},~~void~~,etc.This就是我迄今为止看到:

这样做的最佳方式是什么？

更新:

道具:
- void 不能使用(https://github.com/Microsoft/TypeScript/issues/15409和https://github.com/Microsoft/TypeScript/issues/15419),因为props对象初始化为{}

解

简单地说 - class Foo extends React.Component {}因为道具和州被初始化为{}

Answer 1

作为回答这个问题，你可以使用React.FC<{}>类

const MyStatelessComponent : React.FC<{}> = props =>
    <div>{props.children}</div>

或者，如果您的标记变大：

const MyStatelessComponent : React.FC<{}> = props => {

    {/*  Some code here */}
    return <div>{props.children}</div>

}

如果您使用 TS 并且它抱怨 `FC<{}>`，您可以将其简化为 `FC`，而无需尖括号和大括号。工作示例： `const MyComponent: FC = () => { /* 这里是代码和 tsx */ }` (2认同)

Answer 2

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

道具和状态初始化为{},因此对于没有状态或道具的组件,我们可以简单地执行:

class Foo extends React.Component {}

Answer 3

您可以用于VoidFunctionComponent无状态和无道具组件（没有状态和道具）：

const MyComponent: React.VoidFunctionComponent = () => {
  ...
}

Answer 4

根据这个指南和我的exp,我会说:

class Foo extends React.Component<null, null> {} 当你知道你不会接受道具或陈述
class Foo extends React.Component<any, any> {} 当你知道你会收到道具和状态,但你真的不在乎它们的样子
class Foo extends React.Component<{}, {}> {} 从未见过,似乎很奇怪
class Foo extends React.Component<undefined, undefined> {}同样的null,这取决于你.我经常看到null比undefined
class Foo extends React.Component<void, void> {} 坏主意,因为似乎是为函数返回保留(当你不期望一个)

欢迎其他意见