[ReactDoc] Forwarding Refs
- 圖片來源:Algolia blog
- 內文資料來源:Forwarding Refs @ React Docs
目的
有些時候父層的元件希望能夠取得子層的 DOM 元素(例如,button
或 input
),以便能夠在父層控制子層 DOM 元素的 focus, selection 或 animation 的效果。這時就可以使用 Ref forwarding 來讓父層取得子層 DOM 元素,以便控制和操作它。
備註
通常需要被 forwardRef 的子層元件會是封裝好的元件(例如,套件),其他使用它的開發者無法直接修改,因此才需要透過 forwardRef 把控制權交給父層元件,讓其他開發者可以直接控制。
forwardRef 基本使用
舉例來說,我們建立一個 AwesomeInput
元件:
const AwesomeInput = (props) => <input type="text" />;
接著我們在父層 <App>
元件中使用 <AwesomeInput />
元件:
const App = () => {
return <AwesomeInput />;
};