跳至主要內容

函數/類別元件

將 Flow 類型新增到 React 元件 非常強大。在輸入元件類型後，Flow 會靜態確保您以設計好的方式使用元件。

函式元件​

將 Flow 類型新增到函式元件與 將類型新增到標準函式 相同。只要建立一個物件類型作為 props，Flow 便會確保傳遞給元件的 props 與預期相符。

1import React from 'react';2
3type Props = {4  foo: number,5  bar?: string,6};7
8function MyComponent(props: Props) {9  props.doesNotExist; // Error! You did not define a `doesNotExist` prop.
                    
10
11  return <div>{props.bar}</div>;12}13
14<MyComponent foo={42} />
9:9-9:20: Cannot get `props.doesNotExist` because property `doesNotExist` is missing in `Props` [1]. [prop-missing]

將預設 Props 新增到函式元件​

將預設 props 新增到函式元件的良好範例是使用 具預設值的解構。透過在函式參數中解構 props，您可以將值指定給未傳遞給元件（或傳遞值為 undefined）的任何 props。

1import React from 'react';2
3type Props = {4  foo?: number, // foo is optional to pass in.5  bar: string, // bar is required.6};7
8function MyComponent({foo = 42, bar}: Props) {9  // Flow knows that foo is not null or undefined10  const baz = foo + 1;11}12
13// And we don't need to include foo.14<MyComponent bar={"abc"} />;

類別元件​

若要將 類別元件 Flow 化，可以將 props 的類型作為第一個引數傳遞給 React.Component 類型。這會產生與將類型新增到函式元件的 props 參數相同的效果。

1import React from 'react';2
3type Props = {4  foo: number,5  bar?: string,6};7
8class MyComponent extends React.Component<Props> {9  render(): React.Node {10    this.props.doesNotExist; // Error! You did not define a `doesNotExist` prop.
                           
11
12    return <div>{this.props.bar}</div>;13  }14}15
16<MyComponent foo={42} />;
10:16-10:27: Cannot get `this.props.doesNotExist` because property `doesNotExist` is missing in `Props` [1]. [prop-missing]

現在，無論在 React 元件中使用 this.props，Flow 都會將其視為我們定義的 Props 類型。

注意：如果你不需要再次使用 Props 類型，你也可以內嵌定義：extends React.Component<{ foo: number, bar?: string }>。

React.Component<Props, State> 是一個 泛型類型，它接受兩個類型參數：props 和狀態。第二個類型參數 State 是可選的。預設為 undefined，因此你可以看到在上面的範例中我們沒有包含 State。我們將在下一節中瞭解更多關於狀態的資訊...

新增狀態​

若要為 React 類別元件新增狀態類型：建立一個新的物件類型，在下面的範例中我們將其命名為 State，並將其作為第二個類型參數傳遞給 React.Component。

1import React from 'react';2
3type Props = { /* ... */ };4
5type State = {6  count: number,7};8
9class MyComponent extends React.Component<Props, State> {10  state: State = {11    count: 0,12  };13
14  componentDidMount() {15    setInterval(() => {16      this.setState(prevState => ({17        count: prevState.count + 1,18      }));19    }, 1000);20  }21
22  render(): React.Node {23    return <div>Count: {this.state.count}</div>;24  }25}26
27<MyComponent />;

在上面的範例中，我們使用 React setState() 更新器函式，但你也可以將部分狀態物件傳遞給 setState()。

注意：如果你不需要再次使用 State 類型，你也可以內嵌定義：extends React.Component<{}, { count: number }>。

對類別元件使用預設 Props​

React 支援 defaultProps 的概念，你可以將其視為預設函式參數。當你建立一個元素，並且不包含具有預設值的 prop 時，React 將用來自 defaultProps 的對應值替換該 prop。Flow 也支援這個概念。若要輸入預設 props，請將 static defaultProps 屬性新增至你的類別。

1import React from 'react';2
3type Props = {4  foo: number, // foo is required.5  bar: string, // bar is required.6};7
8class MyComponent extends React.Component<Props> {9  static defaultProps: {foo: number} = {10    foo: 42, // ...but we have a default prop for foo.11  };12}13
14// So we don't need to include foo.15<MyComponent bar={"abc"} />

注意：你不需要在 Props 類型中將 foo 設定為可為空值。如果你為 foo 設定預設 prop，Flow 將確保 foo 是可選的。

如果你為 defaultProps 新增類型註解，你可以將類型定義為

1type DefaultProps = {2  foo: number,3};

並將其擴充至 Props 類型

type Props = {
  ...DefaultProps,
  bar: string,
};

這樣你可以避免重複具有預設值的屬性。

注意：您也可以透過在元件函式中加入 defaultProps 屬性，將此預設 props 格式套用於函式元件。不過，一般來說，使用上述的解構模式會比較簡單。

1function MyComponent(props: {foo: number}) {}2MyComponent.defaultProps = {foo: 42};