Ref 函式

React 允許您使用 refs 來取得元素或元件的執行個體。

函式元件中的 Refs

在函式元件內，使用 useRef Hook 存取 Refs

1import {useRef} from 'react';2import * as React from 'react';3
4function MyComponent() {5  const buttonRef = useRef<null | HTMLButtonElement>(null);
                                                          6  buttonRef as {current: null | HTMLButtonElement}; // useRef wraps the ref value in an object7  return <button ref={buttonRef}>Toggle</button>;8}

5:21-5:58: Cannot call hook [1] because React hooks can only be called within components or hooks. [react-rule-hook]

請注意，useRef 會將 ref 值包裝在一個具有 current 屬性的物件中。這必須反映在接受 ref 值的任何類型的內容中。

類別元件中的 Refs

類別元件中的 Refs 類似於函式元件。若要建立一個，請將屬性新增至您的類別，並將 React.createRef 的結果指派給它。

1import * as React from 'react';2
3class MyComponent extends React.Component<{}> {4  // The `null` here is important because you may not always have the instance.5  buttonRef: {current: null | HTMLButtonElement};6
7  constructor() {8    super();9    this.buttonRef = React.createRef<HTMLButtonElement>();10  }11
12  render(): React.Node {13    return <button ref={this.buttonRef}>Toggle</button>;14  }15}

useRef 和 createRef 之間一個顯著的差異是，createRef 不接受預設值。它會使用值 null 初始化 ref。這是因為 DOM 元素在 MyComponent 的第一次渲染之前不會存在，因此必須使用 null 值。

再次注意，ref 值會包裝在一個具有 current 屬性的物件中。