React + Typescript：無狀態/無道具的 React 組件類型

Question

我見過多個使用 Typescript 的 React 組件示例：

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

當我們不使用 Props 或 State 時，似乎沒有明確的約定。

人們將這些類型設置為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 ），因為 props 對象被初始化為{}

解決方案

簡單地做 - class Foo extends React.Component {}作為 prop 和 state 被初始化為{}

Answer 1

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

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

props 和 state 被初始化為{} ，所以對於沒有 state 和 prop 的組件，我們可以簡單地做：

class Foo extends React.Component {} 

Answer 2

根據本指南和我的經驗，我會說：

1. class Foo extends React.Component<null, null> {}當你知道你不會收到 props 或 state 時
2. class Foo extends React.Component<any, any> {}當你知道你會收到 props 和 state 但你真的不關心它們的樣子
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

對於這個問題的回答，您可以使用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 4

我總是為每個組件創建一個 props 接口，即使它是空白的。 它使事情保持一致，並允許我稍后在需要時輕松添加道具。

Interface FooProps { }

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

Answer 5

您可以將VoidFunctionComponent用於無狀態和無道具組件（沒有狀態和道具）：

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

Answer 6

有狀態（基於類的組件）和無狀態組件在互聯網上有很多關於何時使用一種或另一種的概念，我已經使用這個列表掌握了這些概念（在有實踐經驗之前）：

無國籍

1. 關心事物的外觀。
2. 內部可能包含展示組件和容器組件**，並且通常有一些自己的 DOM 標記和樣式。
3. 通常允許通過 this.props.children 進行收容。
4. 不依賴於應用程序的其余部分，例如 Flux 操作或商店。
5. 不要指定數據是如何加載或改變的。
6. 僅通過 props 接收數據和回調。
7. 被寫成功能組件

示例：菜單、用戶信息、列表、邊欄。

有狀態的

1. 關心事情是如何運作的。
2. 內部可能包含展示組件和容器組件**，但通常沒有任何自己的 DOM 標記，除了一些包裝 div，並且從不具有任何樣式。
3. 向表示或其他容器組件提供數據和行為。
4. 調用 Redux 操作並將它們作為回調提供給展示組件。

示例：UserPage、FollowersSidebar、ArticlesContainer。