您好,登錄后才能下訂單哦!
使用React的forwardRef可以實(shí)現(xiàn)將ref從父組件傳遞到子組件,實(shí)現(xiàn)組件間的引用傳遞。下面是一個(gè)簡(jiǎn)單的例子:
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} />;
});
const ParentComponent = () => {
const childRef = useRef(null);
const handleClick = () => {
childRef.current.focus();
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Focus Input</button>
</div>
);
};
export default ParentComponent;
在上面的例子中,通過(guò)forwardRef將ref從ParentComponent傳遞到ChildComponent,然后在ChildComponent中使用useImperativeHandle來(lái)定義一個(gè)focus方法,以便在ParentComponent中調(diào)用該方法。最后,在ParentComponent中通過(guò)調(diào)用childRef.current.focus()來(lái)觸發(fā)ChildComponent中的focus方法。這樣就實(shí)現(xiàn)了組件間的引用傳遞。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。