類型參考

React 匯出一些實用程式類型，在輸入進階 React 模式時可能會對您有所幫助。在前面的章節中，我們已經看過其中幾個。以下是這些類型的完整參考，以及一些關於如何/在哪裡使用它們的範例。

這些類型都從 react 模組中匯出為命名類型匯出。如果您想將它們作為 React 物件的成員存取（例如 React.Node），並且您將 React 匯入為 ES 模組，則應該將 React 匯入為命名空間

import * as React from 'react';

如果您使用 CommonJS，您也可以需要 React

const React = require('react');

您也可以在 ES 模組環境或 CommonJS 環境中使用命名類型匯入

import type {Node} from 'react';

我們將在以下參考中提到所有類型，就像我們使用

import * as React from 'react';

注意：雖然使用預設匯入匯入 React 有效
import React from 'react';
您將可以存取 React 匯出的所有值，但您無法存取下列文件中的類型！這是因為 Flow 不會將類型新增到預設匯出，因為預設匯出可以是任何值（例如數字）。Flow 會將匯出的命名類型新增到 ES 命名空間物件，您可以使用 import * as React from 'react' 取得，因為 Flow 知道如果您匯出與匯出類型同名的值。
再次，如果你使用下列方式匯入 React：import React from 'react'，你將能夠存取 React.Component、React.createElement()、React.Children 和其他 JavaScript 值。但是，你將無法存取 React.Node、React.ChildrenArray 或其他 Flow 類型。你將需要使用命名類型匯入，例如：import type {Node} from 'react'，以補充你的預設匯入。

`React.Node`

這表示可以在 React 應用程式中呈現的任何節點。React.Node 可以是 null、布林值、數字、字串、React 元素，或這些類型的陣列（遞迴）。

React.Node 是用於註解函式元件和類別呈現方法的回傳類型的良好預設值。你也可以用它來輸入元件作為子項。

以下是將 React.Node 用作函式元件回傳類型的範例

function MyComponent(props: {}): React.Node {
  // ...
}

它也可以用作類別 render 方法的回傳類型

class MyComponent extends React.Component<{}> {
  render(): React.Node {
    // ...
  }
}

以下是將 React.Node 用作子項的 prop 類型的範例

function MyComponent({ children }: { children: React.Node }) {
  return <div>{children}</div>;
}

所有 react-dom JSX 內建函數都將 React.Node 作為其子項類型。<div>、<span>，以及所有其他函數。

`React.MixedElement`

所有 React 元素中最通用的類型（類似於所有值的 mixed）。React.MixedElement 定義為 React.Element<React.ElementType>。

這種類型的常見使用案例是當我們想要使用隱藏元素詳細資料的類型註解元素時。例如

const element: React.MixedElement = <div />;

`React.Element<typeof Component>`

React 元素是 JSX 元素值的類型

const element: React.Element<'div'> = <div />;

React.Element<typeof Component> 也是 React.createElement()/React.jsx() 的回傳類型。

React.Element 採用單一類型引數 typeof Component。typeof Component 是 React 元素的元件類型。對於內建元素，typeof Component 將是你使用的內建函數的字串文字。以下是使用 DOM 內建函數的一些範例

<div /> as React.Element<'div'>; // OK
<span /> as React.Element<'span'>; // OK
<div /> as React.Element<'span'>; // Error: div is not a span.

typeof Component 也可以是你的 React 類別元件或函式元件。

function Foo(props: {}) {}
class Bar extends React.Component<{}> {}

<Foo /> as React.Element<typeof Foo>; // OK
<Bar /> as React.Element<typeof Bar>; // OK
<Foo /> as React.Element<typeof Bar>; // Error: Foo is not Bar

請注意 typeof，這是必需的！我們想要取得 Foo 值的類型。Foo as Foo 是錯誤的，因為 Foo 不能用作類型，因此下列是正確的：Foo as typeof Foo。

沒有 typeof 的 Bar 將是 Bar 執行個體的類型：new Bar() as Bar。我們想要 Bar 的類型，而不是 Bar 執行個體的類型。Class<Bar> 也適用於這裡，但我們偏好 typeof 以與函式元件保持一致性。

`React.ChildrenArray<T>`

React 子項陣列可以是單一值或巢狀到任何層級的陣列。它設計用於與 React.Children API 搭配使用。

例如，如果您想從 React.ChildrenArray<T> 取得一般 JavaScript 陣列，請參閱下列範例

import * as React from 'react';

// A children array can be a single value...
const children: React.ChildrenArray<number> = 42;
// ...or an arbitrarily nested array.
const children: React.ChildrenArray<number> = [[1, 2], 3, [4, 5]];

// Using the `React.Children` API can flatten the array.
const array: Array<number> = React.Children.toArray(children);

`React.AbstractComponent<Config, Instance>`

React.AbstractComponent<Config, Instance> 代表一個元件，其設定為 Config 類型，執行個體為 Instance 類型。

元件的 Config 是您需要傳遞到 JSX 中的物件類型，才能使用該元件建立元素。元件的 Instance 是寫入傳遞到 JSX 中 ref 屬性的 ref 物件 current 欄位的類型。

Config 是必要的，但 Instance 是選用的，預設為混合。

設定為 Config 的類別或函式元件可以在預期 React.AbstractComponent<Config> 的地方使用。

這是 Flow 對 React 元件最抽象的表示，最適合用於撰寫 HOC 和函式庫定義。

`React.ComponentType<Config>`

這與 React.AbstractComponent 相同，但只指定第一個類型參數。

`React.ElementType`

類似於 React.AbstractComponent<Props>，但它也包含 JSX 內建函數（字串）。

React.ElementType 的定義大致為

type ElementType =
  | string
  | React.AbstractComponent<empty, mixed>;

`React.Key`

React 元素上 key 屬性的類型。它是字串和數字的聯集，定義如下

type Key = string | number;

`React.Ref<typeof Component>`

React 元素上 ref 屬性的類型。React.Ref<typeof Component> 可以是字串、ref 物件或 ref 函式。

ref 函式將只接受一個參數，也就是使用 React.ElementRef<typeof Component> 擷取的元素執行個體，或 null，因為 React 在卸載時會將 null 傳遞到 ref 函式。

與 React.Element<typeof Component> 一樣，typeof Component 必須是 React 元件的類型，因此您需要使用 typeof，如 React.Ref<typeof MyComponent>。

React.Ref<typeof Component> 的定義大致為

type Ref<C> =
  | string
  | (instance: React.ElementRef<C> | null) => mixed;
  | { -current: React$ElementRef<ElementType> | null, ... }

`React.PropsOf<Component>`

當 Component 使用 Component Syntax 編寫時，React.PropsOf<Component> 會提供物件的類型，你必須傳遞物件才能使用 JSX 初始化 Component。重要的是，結果類型中的預設道具是可選的。

例如

1import * as React from 'react';2
3component MyComponent(foo: number, bar: string = 'str') {4  return null;5}6
7// Only foo is required8({foo: 3}) as React.ElementConfig<typeof MyComponent>;

`React.ElementConfig<typeof Component>`

與 React.PropsOf 相同，這個工具取得物件的類型，你必須將物件傳遞給組件，才能透過 createElement() 或 jsx() 初始化組件。PropsOf 會使用組件的元素，在使用 Component Syntax 時很方便，ElementConfig 則使用組件的類型。typeof Component 必須是 React 組件的類型，因此你需要使用 typeof，例如 React.ElementConfig<typoef Component>。

重要的是，結果類型中的預設道具是可選的。

例如

import * as React from 'react';

class MyComponent extends React.Component<{foo: number}> {
  static defaultProps = {foo: 42};

  render() {
    return this.props.foo;
  }
}

// `React.ElementProps<>` requires `foo` even though it has a `defaultProp`.
({foo: 42}) as React.ElementProps<typeof MyComponent>;

// `React.ElementConfig<>` does not require `foo` since it has a `defaultProp`.
({}) as React.ElementConfig<typeof MyComponent>;

與 React.Element<typeof Component> 相同，typeof Component 必須是 React 組件的類型，因此你需要使用 typeof，例如 React.ElementProps<typeof MyComponent>。

`React.ElementProps<typeof Component>`

注意：因為 React.ElementProps 沒有保留 defaultProps 的可選性，React.ElementConfig（有保留）通常是較好的選擇，特別是對於簡單的道具傳遞，例如高階組件。你可能不應該使用 ElementProps。

取得 React 元素類型的道具，不會保留 defaultProps 的可選性。typeof Component 可能是 React 類別組件、函式組件或 JSX 內建字串的類型。這個類型用於 React.Element<typeof Component> 上的 props 屬性。

與 React.Element<typeof Component> 相同，typeof Component 必須是 React 組件的類型，因此你需要使用 typeof，例如 React.ElementProps<typeof MyComponent>。

`React.RefOf<Component>`

使用元件語法時，React.RefOf<Component> 會提供元件 ref 屬性中 current 欄位的類型。如果元件沒有 ref 屬性，它會傳回 void。

`React.ElementRef<typeof Component>`

取得 React 元素的實例類型。不同的元件類型會有不同的實例

React.AbstractComponent<Config, Instance> 會傳回 Instance 類型。
React 類別元件會是類別實例。因此，如果你有 class Foo extends React.Component<{}> {} 並使用 React.ElementRef<typeof Foo>，類型就會是 Foo 的實例。
React 函式元件沒有後端實例，因此 React.ElementRef<typeof Bar> (當 Bar 是 function Bar() {}) 會提供 void 類型。
像 div 這樣的 JSX 內建元素會提供其 DOM 實例。對於 React.ElementRef<'div'>，會是 HTMLDivElement。對於 React.ElementRef<'input'>，會是 HTMLInputElement。

與 React.Element<typeof Component> 類似，typeof Component 必須是 React 元件的類型，因此你需要使用 typeof，例如 React.ElementRef<typeof MyComponent>。

`React.Config<Props, DefaultProps>`

根據屬性和預設屬性計算設定檔物件。這對於註解抽象化設定檔的 HOC 最為有用。請參閱我們的撰寫 HOC 文件以取得更多資訊。

React.Node​

React.MixedElement​

React.Element<typeof Component>​

React.ChildrenArray<T>​

React.AbstractComponent<Config, Instance>​

React.ComponentType<Config>​

React.ElementType​

React.Key​

React.Ref<typeof Component>​

React.PropsOf<Component>​

React.ElementConfig<typeof Component>​

React.ElementProps<typeof Component>​

React.RefOf<Component>​

React.ElementRef<typeof Component>​

React.Config<Props, DefaultProps>​