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

React + Typescript: Type of React component with no state/no props

提问by jobmo

I've seen multiple examples of React components using Typescript:

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

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

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

It seems there is no a clear convention when we don't use either the Props or the State.

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

People set these types as any, null,undefined,{}, void, etc.This is what I've seen so far:

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

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

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

What's the best way of doing it?

最好的方法是什么？

Update:

更新：

• Props:

  • voidcannotbe used (https://github.com/Microsoft/TypeScript/issues/15409and https://github.com/Microsoft/TypeScript/issues/15419) as the props object is initialised to {}

• 道具：

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

SOLUTION

解决方案

Simply do - class Foo extends React.Component {}as prop and state are initialised to {}

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

采纳答案by jobmo

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

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

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

Props and state are initialised to {}, so for a component with no state nor prop we can simply do:

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

class Foo extends React.Component {} 

回答by soywod

According to this guidelineand my exp, I would say :

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

1. class Foo extends React.Component<null, null> {}when you know you will not recieve props nor state
2. class Foo extends React.Component<any, any> {}when you know you will recieve props and state but you really don't care what they look like
3. class Foo extends React.Component<{}, {}> {}never saw, seems strange
4. class Foo extends React.Component<undefined, undefined> {}same as null, it's up to you. I see more often nullthan undefined
5. class Foo extends React.Component<void, void> {}bad idea, since seems to be reserved for functions return (when you do not expect one)

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> {}坏主意，因为似乎是为函数返回保留的（当你不期望一个时）

Other opinions are welcomed

欢迎其他意见

回答by Leone

As answered for this question, you can use the React.FC<{}>class

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

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

Or if your markup gets bigger:

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

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

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

}

回答by SteveKitakis

I always create a props Interface for each component, even if it's blank. It keeps things consistant and allows me to easily add props later if needed.

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

Interface FooProps { }

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

回答by Yuri Ramos

Stateful(class based components) & Stateless components there's a lot of conceptions on the internet about when use one or another, I've grasped these concepts using this list (before have practical experience):

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

Stateless

无国籍

1. Are concerned with how things look.
2. May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.
3. Often allow containment via this.props.children.
4. Have no dependencies on the rest of the app, such as Flux actions or stores.
5. Don't specify how the data is loaded or mutated.
6. Receive data and callbacks exclusively via props.
7. Are written as functional components

1. 关心事物的外观。
2. 内部可能包含展示组件和容器组件**，并且通常有一些自己的 DOM 标记和样式。
3. 通常允许通过 this.props.children 进行收容。
4. 不依赖于应用程序的其余部分，例如 Flux 操作或商店。
5. 不要指定数据是如何加载或改变的。
6. 仅通过 props 接收数据和回调。
7. 写成功能组件

Examples: Menu, UserInfo, List, SideBar.

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

Stateful

有状态的

1. Are concerned with how things work.
2. May contain both presentational and container components** inside but usually don't have any DOM markup of their own except for some wrapping divs, and never have any styles.
3. Provide the data and behavior to presentational or other container components.
4. Call Redux actions and provide these as callbacks to the presentational components.

1. 关心事情是如何运作的。
2. 内部可能同时包含展示组件和容器组件**，但通常没有任何自己的 DOM 标记，除了一些包装 div，并且从不具有任何样式。
3. 向表示或其他容器组件提供数据和行为。
4. 调用 Redux 操作并将它们作为回调提供给展示组件。

Examples: UserPage, FollowersSidebar, ArticlesContainer.

示例：UserPage、FollowersSidebar、ArticlesContainer。