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

Question

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

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

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

人们将这些类型设置为any，null，undefined，{}， void 等。这就是我到目前为止看到过：

1. class Foo extends React.Component<null, null> {}
2. class Foo extends React.Component<any, any> {}
3. class Foo extends React.Component<{}, {}> {}
4. class Foo extends React.Component<undefined, undefined> {}
5. class Foo extends React.Component<void, void> {}
6. class Foo extends React.Component<object, object> {}

最好的方法是什么？

更新

• 道具：

  由于道具对象已初始化为void ，因此无法使用
  • {} （https://github.com/Microsoft/TypeScript/issues/15409和https://github.com/Microsoft/TypeScript/issues/15419）

解

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

Answer 1

来自https://github.com/DefinitelyTyped/DefinitelyTyped/blob/15b7bac31972fbc081028937dfb1487507ca5fc9/types/react/index.d.ts#L199-L200

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

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

class Foo extends React.Component {} 

Answer 2

根据this guideline和我的exp，我会说：

1. class Foo extends React.Component<null, null> {}当你知道你不会收到道具或陈述
2. class Foo extends React.Component<any, any> {}当你知道你会收到道具和陈述但你真的不在乎他们的样子
3. class Foo extends React.Component<{}, {}> {}从未见过，似乎很奇怪
4. class Foo extends React.Component<undefined, undefined> {}与null相同，由您决定。我经常看到null而不是undefined
5. class Foo extends React.Component<void, void> {}坏主意，因为似乎是为函数返回保留（当你不指望一个时）

欢迎其他意见

Answer 3

我总是为每个组件创建一个道具界面，即使它是空白的。它使事情保持一致，并允许我在以后需要时轻松添加道具。

Interface FooProps { }

class foo extends React.Component<FooProps, any> {
}

Answer 4

有状态（基于类的组件）＆amp;无国界的组件在互联网上有很多关于何时使用这些概念的概念，我已经使用这个列表掌握了这些概念（在有实际经验之前）：

<强>无国籍

1. 关注事物的外观。
2. 可以在里面包含表示和容器组件**， 并且通常有一些DOM标记和自己的样式。
3. 通常允许通过this.props.children进行遏制。
4. 不依赖于应用程序的其余部分，例如Flux操作或 存储
5. 不指定数据的加载方式或变异方式。
6. 仅通过道具接收数据和回调。
7. 被写为功能组件

示例：菜单，UserInfo，List，SideBar。

<强>有状态

1. 关心事情的运作方式。
2. 可以在里面包含表示和容器组件** 但除了一些之外，通常没有自己的DOM标记 包装div，从来没有任何风格。
3. 向演示文稿或其他容器提供数据和行为 组件。
4. 调用Redux操作并将其作为回调提供给 表达组件。

示例：UserPage，FollowersSidebar，ArticlesContainer。

Answer 5

在回答for this question时，您可以使用React.FC<{}>类

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

或者如果你的标记变大：

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

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

}

Answer 6

您可以将 VoidFunctionComponent 用于 stateless ans propless 组件（没有 state ana props）：

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