溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
ForwardRef是React提供的一種特殊的高階組件，它允許組件將ref屬性傳遞給其子組件。
使用ForwardRef可以在一個函數組件內部訪問子組件的DOM元素或實例。ForwardRef接受一個渲染函數作為參數，該函數接受props和ref作為參數，并返回組件的JSX。當渲染函數返回的組件被渲染時，ref將被傳遞給該組件。
下面是一個示例代碼，展示了如何使用ForwardRef：
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} />;
});
const ParentComponent = () => {
const childRef = useRef();
const handleClick = () => {
childRef.current.focus();
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Focus Input</button>
</>
);
};
在上面的示例中，ChildComponent使用ForwardRef來接收ref，并在內部使用useImperativeHandle將focus方法暴露給父組件。ParentComponent中通過使用childRef來訪問ChildComponent的DOM元素，并在點擊按鈕時調用focus方法。
通過使用ForwardRef，我們可以更容易地在React組件中訪問子組件的DOM元素或實例。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
