傳送 ref 是一種自動把 ref 從一個 component 傳遞到它底下的其中一個 child 的技巧。通常來說，應用程式裡大部分的 component 都不需要用到它。然而，對某些種類的 component 來說它很有用，特別是能夠重複使用的函式庫。以下會解釋最常見的情形。

有幾種使用 ref 的情況：

• 管理 focus、選擇文字、或影音播放。
• 觸發即時的動畫。
• 與第三方 DOM 函式庫整合。

以下一個 focus 的例子，使用 ref 觸發 focus 事件：

const FormInput = React.forwardRef((props, ref) => (
  <input ref={ref} className="FancyText" type="text" id="myTextField" value={props.children} />
));

class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.ref = React.createRef();
    this.focusMethod = this.focusMethod.bind(this);
  }
  
  focusMethod() {
    this.ref.current.focus()
  }
  
  render() {
    return (
      <div className="App">
        <FormInput ref={this.ref}>我是一些輸入</FormInput>
        <button type="button" onClick={this.focusMethod}>點我 Focus!</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

傳送 Ref 使用 API 與技術

• 使用 React.createRef // 建立一個 ref 以透過 ref attribute 夾帶在一個 React element 之上。
• 使用 React.forwardRef // 建立一個 React component 並將 ref attribute 傳遞給另外一個 component
• 在 Higher-Order Component 內傳送 ref
• 在 DevTool 裡顯示客製化的名稱 //使用 displayName

在 DevTool 裡面查看 displayName 的例子：

Codepen

Function Component && Hook useImperativeHandle 的例子

function FormInput(props, ref) {
  const inputRef = React.useRef();
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}

const FancyInput = React.forwardRef(FormInput);

function App() {
 const ref = React.useRef();
 
 function handleFocus() {
   ref.current.focus();
 }
 
 return (
   <div className="App">
     <FancyInput ref={ref} placeholder="my input" />
     <button onClick={handleFocus}>Focus</button>
   </div>
 );
}

Codepen

以上今天。

參考資料：
https://zh-hant.reactjs.org/docs/forwarding-refs.html
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
https://blog.logrocket.com/cleaning-up-the-dom-with-forwardref-in-react/