Skip to main content

组件类型

信息

组件类型仅在 Flow v0.243.0+ 中可用。如果你使用的是旧版本，请使用 React.AbstractComponent

¥Component Types are only available in Flow v0.243.0+. If you are on an older version, please use React.AbstractComponent

组件类型的语法与我们的运行时 组件语法 类似，可以轻松描述组件的类型。组件类型对于编写库定义最有用。

¥Component Types have syntax similar to our runtime Component Syntax to make it easy to describe the type of a component. Component Types are most useful for writing library definitions.

指定属性​

¥Specifying Props

要声明组件类型，你可以使用 component 关键字并列出你的组件所需的 props。

¥To declare a Component Type you can use the component keyword and list out the props your component expects.

1import * as React from 'react';2
3type ComponentType = component(numberProp: number, optionalProp?: string);4
5declare const Component: ComponentType;6
7<Component numberProp={3} />; // OK! optionalProp is optional

与 组件语法 一样，组件类型也接受 rest 参数：

¥Like Component Syntax, Component Types also accept a rest parameter:

import * as React from 'react';

import type {Props as StarProps} from './Star';
import Star from './Star';

type BlueStarType = component(specificProp: string, ...StarProps);

与组件语法一样，你也可以声明内联 ref prop（但不在你的 rest 参数中）：

¥Like Component Syntax, you can also declare an inline ref prop (but not in your rest parameter):

1import * as React from 'react';2import {useRef} from 'react';3
4type ComponentWithRef = component(someProp: number, ref: React.RefSetter<number>);5
6declare const Component: ComponentWithRef;7
8component Example() {9    const ref = useRef<number | null>(null);10    return <Component someProp={42} ref={ref}/>;11}

指定渲染类型​

¥Specifying Render Types

你还可以为你的组件指定 渲染类型，就像你可以使用 组件语法 一样

¥You can also specify the Render Type for your component just like you can with Component Syntax

1import * as React from 'react';2
3component Foo() { return null }4type ComponentWithRenders = component() renders Foo;5
6declare const Component: ComponentWithRenders;7<Component /> as renders Foo; // OK!

多态组件类型​

¥Polymorphic Component Types

你还可以编写多态组件类型，这对于声明 "transparent" 组件很有帮助：

¥You can also write polymorphic Component Types, which is helpful for declaring "transparent" components:

1import * as React from 'react';2
3declare const TransparentComponent: component<T: React.Node>(children: T) renders T;4
5component Example() { return null }6
7const element: renders Example = (8    <TransparentComponent>9        <Example />10    </TransparentComponent>11); // OK!

使用组件类型注释组件​

¥Annotating Components with Component Types

以下是使用组件类型描述组件语法组件类型的方法：

¥Here's how you can describe the type of a Component Syntax component using a Component Type:

1import * as React from 'react';2
3component Foo() { return null }4
5component Example(someProp: number, ref: React.RefSetter<number>) renders Foo {6    return <Foo />;7}8
9Example as component(someProp: number, ref: React.RefSetter<number>) renders Foo; // OK!10
11
12component PolymorphicExample<T: React.Node>(children: T) renders T {13    return children;14}15
16PolymorphicExample as component<T: React.Node>(children: T) renders T; // OK!