IT技术 - React + Typescript：无状态/无props的 React 组件类型 - 吾爱随笔录

IT技术 reactjs typescript

2021-05-10 20:35:13

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

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

当我们不使用 Props 或 State 时，似乎没有明确的约定。

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

最好的方法是什么？

更新：

props：
- void 不能使用（https://github.com/Microsoft/TypeScript/issues/15409和https://github.com/Microsoft/TypeScript/issues/15419），因为 props 对象被初始化为{}

解决方案

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

4个回答

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

props 和 state 被初始化为{}，所以对于没有 state 和 prop 的组件，我们可以简单地做：

class Foo extends React.Component {}

正如对这个问题的回答，您可以使用React.FC<{}>该类

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

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

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

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

}

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

class Foo extends React.Component<null, null> {} 当您知道您不会收到props或声明时
class Foo extends React.Component<any, any> {} 当你知道你会收到props和状态但你真的不在乎它们的样子
class Foo extends React.Component<{}, {}> {} 没见过，感觉怪怪的
class Foo extends React.Component<undefined, undefined> {}一样null，这取决于你。我看到的次数null比undefined
class Foo extends React.Component<void, void> {} 坏主意，因为似乎是为函数返回保留的（当你不期望一个时）

欢迎其他意见

您可以VoidFunctionComponent用于无状态 ans 无props组件（没有状态 ana props）：

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

其它你可能感兴趣的问题