反应类型脚本：无状态/无道具的反应组件类型

Question

我见过多个使用Typescript的React组件示例：

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++组件

当我们不使用道具或国家时，似乎没有一个明确的惯例。

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

1. 类Foo扩展了React。组成部分

最好的方法是什么？

更新：

>

• void无法使用(https://github.com/Microsoft/TypeScript/issues/15409和https://github.com/Microsoft/TypeScript/issues/15419）作为道具对象初始化为{}

解决方案

只需执行-类Foo扩展React。组件{}作为prop和state被初始化为{}




Answer 1

根据本指南和我的经验，我想说：

1. 类Foo扩展React。组件

欢迎其他意见

Answer 2

如对该问题的回答，您可以使用React。常设费用

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

或者如果您的标记变得更大：

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

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

}

Answer 3

从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 {}