如何使用 React.forwardRef？

Question

我想將 ref 傳遞給帶有forwardRef的子組件，但給定 ref 的current始終為null 。 為什么？

考慮這個簡單的例子：

// Details.jsx
import { useRef, forwardRef } from 'react';

const Details = () => {
    const usernameRef = useRef(null);

    const InputClipboardButton = React.forwardRef((props, ref) => (
        <ClipboardButton targetInputRef={ref} />
    ));

    return (
        <div>
            <input type="text" ref={usernameRef} />
            <InputClipboardButton ref={usernameRef} />
        </div>
    );
};

// ClipboardButton.jsx
const ClipboardButton = ({ targetInputRef }) => {
    const copyToClipboard = () => {
        console.log(targetInputRef);
    }

    <button onClick={copyToClipboard}>
        Copy
    </button>
}; 

Answer 1

使用forwardRef時，必須注意傳遞參數的順序（ props和ref ）：

您可以像這樣定義組件：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

請注意forwardRef如何采用兩個參數：

1. 道具
2. 正在轉發的ref

您還可以解構props值，以及將ref屬性稱為不同的名稱：

const FancyButton = React.forwardRef(({
  btnType,
  children
}, forwardedRef) => (
  <button ref={forwardedRef} type={btnType} className="FancyButton">
    {children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref} btnType="button">Click me!</FancyButton>;

改編自React Docs的示例

Answer 2

Clipboard Button 是一個組件，因此您也必須在該組件中使用 forwardRef

    const ClipboardButton = forwardRef((props,ref) => {
        const copyToClipboard = () => {
           console.log(ref);
        }

        <button onClick={copyToClipboard}>
            Copy
        </button>
   });