ReactJS - 轉發 Refs：初學者指南

你好，未來的 React 巔峰大師！今天，我們將踏上一段令人興奮的旅程，探索 React 的世界，並深入了解一個名為「轉發 Refs」的概念。如果你是編程新手，別擔心；我將成為你的友好導遊，我們會一步步來。在本教程結束時，你將能像專業人士一樣轉發 refs！

ReactJS - Forwarding Refs

Refs 是什麼，我們為什麼需要轉發它們？

在我們深入探讨轉發 refs 之前，讓我們先來聊聊 refs 本身。想像你正在蓋一個房子（這跟我們創建網頁應用程序有點類似）。有時候，你需要直接訪問或操作房子的特定部分。在 React 中，refs 就像特殊的工具，讓我們能夠對我們的组件進行這樣的操作。

現在，轉發 refs 就像在我們房子的不同房間間傳遞這些特殊工具。這是一種技術，讓我們能夠將一個 ref 通過一個组件傳遞給它的子组件。這在我們使用可重用组件庫時特別有用。

forwardRef 方法：我們的魔法棒

React 提供了我們一個名為 forwardRef 的方法，讓 ref 轉發成為可能。把它想像成一根魔法棒，讓我們的组件能夠接受一個 ref 並將它傳遞得更遠。

forwardRef 方法的簽名

讓我們看看我們如何使用這根魔法棒：

const ForwardedComponent = React.forwardRef((props, ref) => {
// 组件邏輯在這裡
});

這可能一開始看起來有點令人生畏，但讓我們分解一下：

我們正在創建一個新的组件並將它賦值給 ForwardedComponent。
我們使用 React.forwardRef() 來包裝我們的组件函數。
我們的组件函數現在接收兩個參數：props（我們已經熟悉）和 ref（我們的新朋友）。

在组件中應用 forwardRef

現在，讓我們看看我們如何在真實世界的場景中使用這個。想像我們正在創建一個我們希望在整個應用程序中使用的自定義輸入组件。

import React from 'react';

const FancyInput = React.forwardRef((props, ref) => {
return <input ref={ref} {...props} style={{border: '2px solid purple'}} />;
});

export default FancyInput;

讓我們分解這個：

我們導入 React（總是重要的！）。
我們使用 React.forwardRef 創建我們的 FancyInput 组件。
在我們的组件中，我們返回一個 <input> 元素。
我們使用 ref 屬性將 ref 傳遞給我們的 <input>。
我們將 props 展開到我們的 <input> 上，這樣它就能接受我們傳遞給 FancyInput 的任何 prop。
我們為我們的輸入添加一點風格，讓它變得時髦（有人喜歡紫色邊框嗎？）。

現在，當我們在應用程序的其他地方使用我們的 FancyInput 组件時，我們可以將一個 ref 附加到它，然後這個 ref 實際上會附加到底層的 <input> 元素上。

以下是如何使用我們新组件的範例：

import React, { useRef, useEffect } from 'react';
import FancyInput from './FancyInput';

function App() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return (
<div>
<FancyInput ref={inputRef} placeholder="輸入一些時髦的東西..." />
</div>
);
}

在這個例子中：

我們使用 useRef 創建一個 ref。
我們將這個 ref 傳遞給我們的 FancyInput 组件。
在 useEffect 钩子中，我們使用 ref 來當组件挂载時聚焦輸入。

瞧！我們成功地通過我們的自定義组件轉發了一個 ref。

這有什麼用？

你可能會想，「為什麼要這麼麻煩？」。想像你正在建立一個可重用组件的庫。使用 forwardRef，你給了组件的使用者在不暴露组件整個內部結構的情況下與底層 DOM 元素交互的能力。

這就像給某人一個只有必要按鈕的電視遙控器，而不是讓他們面對電視的所有內部電路。

forwardRef 方法的一覽表

這裡有一個便捷的表格，總結了我們討論過的關鍵方法：

方法	描述	示例
`React.forwardRef()`	創建一個可以將 ref 屬性轉發給子组件的 React 组件	`const FancyButton = React.forwardRef((props, ref) => ...)`
`useRef()`	創建一個可變的 ref 對象	`const ref = useRef(null)`
`ref` 屬性	將 ref 附加到 React 元素	`<input ref={ref} />`

結論

這就是 React 中轉發 refs 的世界。記住，像任何強大的工具一樣，謹慎使用 refs 和 ref 轉發。它們對於管理焦點、觸發動畫或與第三方 DOM 库集成非常適合。

在你繼續你的 React 冒險時，你會發現更多可以使用轉發 refs 的情況。繼續練習，繼續編碼，在你意識到之前，你將會建造出令人驚艷的 React 應用程序！

快樂編程，願你的 refs 始終轉發正確！

Credits: Image by storyset