Reactjs 反应+；类型脚本：不带状态/无道具的React组件类型

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

类Foo扩展React.Component{}

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

人们将这些类型设置为

any

，

null

，

undefined

，

{}

，

void

，等等。这是我到目前为止看到的：

类Foo扩展React.Component{}

class Foo扩展了React.Component，并将props对象初始化为
{}

解决方案

简单地做-

类Foo扩展React.Component{}

作为prop和state被初始化为

{}

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

无状态

他们关心事物的外观

可能包含表象和容器组件**内部， 并且通常有一些自己的DOM标记和样式

通常允许通过此.props.children进行遏制

对应用程序的其他部分没有依赖关系，例如通量操作或 商店

不要指定如何加载或修改数据

仅通过props接收数据和回调

是作为功能组件编写的

示例：菜单、用户信息、列表、侧栏。

有状态的

他们关心事物如何运作

可能同时包含表示组件和容器组件** 但是通常没有自己的DOM标记，除了一些 包装div，并且从来没有任何样式

向presentational或其他容器提供数据和行为 组成部分

调用Redux操作并将其作为回调提供给 表象成分

示例：用户页面、FollowersSidebar、ArticlesContainer。

根据我的经验，我会说：

class Foo扩展React.Component{}

当您知道您将不会收到道具或状态时

class Foo扩展React.Component{}

当你知道你会收到道具和状态，但你真的不在乎它们是什么样子的时候

类Foo扩展React.Component{}

从未见过，看起来很奇怪

class Foo扩展React.Component{}

与

null

相同，由您决定。我经常看到

null

而不是

undefined

类Foo扩展了React.Component{}

这是个坏主意，因为它似乎是为函数返回保留的（当您不期望返回时）

---

欢迎其他意见

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

Interface FooProps { }

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

接口FooProps{}
类foo扩展了React.Component{
}

正如所回答的，您可以使用

React.FC

类

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

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

或者如果您的标记变大：

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

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

}

const MyStatelessComponent:React.FC=props=>{
{/*这里有些代码*/}
返回{props.children}
}

来自

---

您可以使用

VoidFunctionComponent

来创建无状态ans props组件（无状态ana props）：

---

谢谢你的回答，但我的意思是，我举的例子中哪些是正确的方法。我编辑了这个问题，让它更清楚。你为国家做同样的事情吗？你可以。我通常只是把它当作“任何”。我正在使用react-redux来管理状态，我唯一需要本地状态的时候就是输入字段。我看到一些人在

void

方面有问题，因为最近版本中的一个更改将道具初始化为{}。如果我使用

null

，那么我会得到这个错误：类型{}不能分配给类型'null'@Al.G。彼此彼此。显然，如果你既没有道具也没有状态，最好是省略尖括号，但是如果你有一个或另一个，我认为

{}

是最好的选择

React.SFC

也可以重构为

React.FC

或

React.FunctionComponent

，因为钩子在功能组件中引入了状态。

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

class Foo extends React.Component {} 

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