类型引用

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 prop 的 ref 对象的 current 字段的值的类型。

Config 是必需的，但 Instance 是可选的，默认为 mixed。

具有配置 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 prop 的类型。它是字符串和数字的并集，定义为

type Key = string | number;

`React.Ref<typeof Component>`

React 元素上 ref prop 的类型。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>`

当使用组件语法时，React.PropsOf<Component> 将为您提供必须传递给组件以使用 JSX 实例化它的对象的类型。重要的是，具有默认值的 props 在生成的类型中是可选的。

例如

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 接受组件的元素，这在使用组件语法时很方便，但 ElementConfig 接受组件的类型。typeof Component 必须是 React 组件的类型，因此您需要使用 typeof，如 React.ElementConfig<typoef Component>。

重要的是，具有默认值的 props 在生成的类型中是可选的。

例如，

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（保留可选性）通常是更好的选择，特别是对于简单的 props 传递，例如高阶组件。您可能不应该使用 ElementProps。

获取 React 元素类型的 props，不保留 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 prop 上的 current 字段的类型。如果组件上没有 ref prop，它将返回 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>`

从 props 和默认 props 计算配置对象。这对于注释抽象在配置上的 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>​