跳到主要內容

渲染類型

有些元件函式庫或設計系統可能想要限制元件的組成方式。例如，選單應該只渲染選單項目作為子項。渲染類型是一種內建方式，可以在支援這些限制的同時，仍讓使用者在使用這些元件時享有豐富的彈性。

基本行為​

元件可以使用 renders 關鍵字宣告它渲染的內容

1import * as React from 'react';2
3component Header(size: string, color: string) { return <div /> }4
5component LargeHeader(color: string) renders Header {6  return <Header size="large" color={color} />; // Ok!7}

當你宣告元件會渲染特定元素時，你可以傳回任何最終在 renders 鏈中渲染該元件的元件

1import * as React from 'react';2
3component Header(size: string, color: string) { return <div /> }4
5component LargeHeader(color: string) renders Header {6  return <Header size="large" color={color} />;7}8
9component LargeBlueHeader() renders Header {10  // You could also use `renders LargeHeader` above11  return <LargeHeader color="blue" />;12}

元件可以指定渲染特定元素的 props

1import * as React from 'react';2
3component Header(size: string, color: string, message: string) {4  return <h1 style={{color}}>{message}</h1>;5}6
7component Layout(header: renders Header) {8  return (9    <div>10      {header}11      <section>Hi</section>12    </div>13  );14}

你可以將 Header 的元素或渲染 Header 的元件元素傳遞給該 prop

<Layout header={<LargeBlueHeader />} />;

你無法將未渲染標題的元件傳遞給預期標題的渲染類型

1import * as React from 'react';2
3component Footer() {4  return <footer />;5}6
7component Header(size: string, color: string, message: string) {8  return <h1 style={{color}}>{message}</h1>;9}10
11component Layout(header: renders Header) {12  return <div>{header}</div>;13}14
15<Layout header={<Footer />} />; // ERROR Footer does not render Header
                          
15:17-15:26: Cannot create `Layout` element because `Footer` element [1] does not render `Header` [2] in property `header`. [incompatible-type]

與設計系統整合​

渲染類型旨在簡化與設計系統的整合。如果設計系統元件中的 prop 預期渲染類型，你可以將該類型複製/貼上到元件上，以與設計系統整合

1import * as React from 'react';2
3component Header() {4  return <h1>Header!</h1>;5}6
7component Layout(header: renders Header) {8  return <div>{header}</div>;9}10
11// Copy-paste the header props' type!12component ProductHeader() renders Header {13  // We must return a value that renders a Header to satisfy the signature14  return <Header />;15}16
17// And now you can integrate with the design system!18<Layout header={<ProductHeader />} />; // OK!

渲染可選元素​

您可能想要描述一個元件，它可以採用一個子元件，這個子元件最終可能會渲染一個元素或什麼都不渲染。您可以使用特殊渲染類型變體 renders? 來達成此目的

1import * as React from 'react';2
3component DesignSystemCardFooter() {4  return <div>Footer Content</div>;5}6
7component DesignSystemCard(8  children: React.Node,9  footer: renders? DesignSystemCardFooter,10) {11  return <div>{children}{footer}</div>;12}13
14// With these definitions, all of the following work:15
16<DesignSystemCard footer={<DesignSystemCardFooter />}>Card</DesignSystemCard>;17<DesignSystemCard footer={null}>Card</DesignSystemCard>;18<DesignSystemCard footer={undefined}>Card</DesignSystemCard>;19<DesignSystemCard footer={false}>Card</DesignSystemCard>;20
21component ProductFooter(hasFooter?: boolean) renders? DesignSystemCardFooter {22  return hasFooter && <DesignSystemCardFooter />;23}24
25<DesignSystemCard footer={<ProductFooter />}>Card</DesignSystemCard>;

渲染清單​

您可能想要描述一個元件，它可以採用任意數量的子元件，這些子元件會渲染一個特定元素作為道具。您可以使用特殊渲染類型變體 renders* 來達成此目的

1import * as React from 'react';2
3component DesignSystemMenuItem() {4  return <li>Menu Item</li>;5}6
7component DesignSystemMenu(8  children: renders* DesignSystemMenuItem,9) {10  return <ul>{children}</ul>11}12
13// With these definitions, all of the following work:14
15const menu1 = (16  <DesignSystemMenu>17    <DesignSystemMenuItem />18  </DesignSystemMenu>19);20
21const menu2 = (22  <DesignSystemMenu>23    <DesignSystemMenuItem />24    <DesignSystemMenuItem />25  </DesignSystemMenu>26);27
28const menu3 = (29  <DesignSystemMenu>30    {[31      <DesignSystemMenuItem />,32      <DesignSystemMenuItem />,33    ]}34    <DesignSystemMenuItem />35  </DesignSystemMenu>36);37
38component ProductMenuItem() renders DesignSystemMenuItem {39  return <DesignSystemMenuItem />;40}41
42const menu4 = (43  <DesignSystemMenu>44    {[45      <ProductMenuItem />,46      <DesignSystemMenuItem />,47    ]}48    <DesignSystemMenuItem />49  </DesignSystemMenu>50);

透明元件​

元件可以是「透明的」

1import * as React from 'react';2
3component TransparentComponent<T: React.Node>(children: T) renders T {4  // .. do something5  return children;6}7
8component Header(text: string) {9  return <h1>{text}</h1>;10}11component InstagramHeader() renders Header {12  return <Header text="Instagram" />;13}14component Layout(15  header: renders Header,16) {17  return <div>{header}</div>;18}19
20component Page() {21  const wrappedHeader = <TransparentComponent><InstagramHeader /></TransparentComponent>22  return <Layout header={wrappedHeader} />; // Ok!23}

與非元件語法元件互操作​

您也可以使用 renders 來註解函式元件

1import * as React from 'react';2
3component Header(text: string) {4  return <h1>{text}</h1>;5}6component InstagramHeader() renders Header {7  return <Header text="Instagram" />;8}9component Layout(10  header: renders Header,11) {12  return <div>{header}</div>;13}14
15function FunctionHeader(): renders Header {16  return <InstagramHeader />;17}18
19function InstagramPage() {20  return <Layout header={<FunctionHeader />} />; // OK!21}

子類型行為​

所有渲染類型都是 React.Node 的子類型，只有 renders Foo 是 React.MixedElement 的子類型。

1import * as React from 'react';2
3component Header() {4 return <h1>Hello Header!</h1>;5}6
7declare const rendersHeader: renders Header;8declare const rendersMaybeHeader: renders? Header;9declare const rendersHeaderList: renders* Header;10
11rendersHeader as React.Node;12rendersMaybeHeader as React.Node;13rendersHeaderList as React.Node;14
15rendersHeader as React.MixedElement;16rendersMaybeHeader as React.MixedElement; // ERROR!
                  
17rendersHeaderList as React.MixedElement; // ERROR!
                 
16:1-16:18: Cannot cast `rendersMaybeHeader` to `MixedElement` because renders? `Header` [1] is incompatible with `React.Element` [2]. [incompatible-cast]
17:1-17:17: Cannot cast `rendersHeaderList` to `MixedElement` because renders* `Header` [1] is incompatible with `React.Element` [2]. [incompatible-cast]

renders Foo 是 renders? Foo 的子類型，而 renders? Foo 是 renders* Foo 的子類型。

1import * as React from 'react';2
3component Header() {4 return <h1>Hello Header!</h1>;5}6
7declare const rendersHeader: renders Header;8declare const rendersMaybeHeader: renders? Header;9declare const rendersHeaderList: renders* Header;10
11rendersHeader as renders? Header;12rendersHeader as renders* Header;13rendersMaybeHeader as renders* Header;14
15rendersMaybeHeader as renders Header; // ERROR
                  
16rendersHeaderList as renders Header; // ERROR
                 
                 
17rendersHeaderList as renders? Header; // ERROR
                 
15:1-15:18: Cannot cast `rendersMaybeHeader` to renders `Header` because a value that renders nothing [1] does not render `Header` [2]. [incompatible-cast]
16:1-16:17: Cannot cast `rendersHeaderList` to renders `Header` because `$ReadOnlyArray` [1] does not render `Header` [2]. [incompatible-cast]
16:1-16:17: Cannot cast `rendersHeaderList` to renders `Header` because a value that renders nothing [1] does not render `Header` [2]. [incompatible-cast]
17:1-17:17: Cannot cast `rendersHeaderList` to renders? `Header` because `$ReadOnlyArray` [1] does not render `Header` [2]. [incompatible-cast]