ForwardRef na useImperativeHandle ni kwa nini?

Question

Accepted Answer

A `ref` iliyopitishwa kwa kipengele cha kaida **hapana** kwa kiotomatiki kufikia nodi ya DOM ndani yake. **`forwardRef`** inaruhusu kipengele kupokea ref na kuiambatanisha kwa kipengele cha watoto. **`useImperativeHandle`** inakamatia *nini* ambayo ref hiyo inaeneza. ## Kuweka ref kwa nodi ya DOM ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## Kueneza API ya kaida badala ya nodi ghafi Kawaida hutaki kufichua nodi nzima ya DOM — tu njia mahususi: ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## Ni lini la kuutumia (kwa matone) Pendekeza props/state kwa mawasiliano. Chukua refs tu kwa hitaji halisi la **imperativ**: usimamizi wa lengo, kuguruza, uteuzi wa maandishi, uigaji wa media, au kuunganisha vitabu vya imperativ. Kumbuka: katika **React 19**, `ref` inaweza kupitishwa kama prop ya kaida, kwa hivyo `forwardRef` mara nyingi haihitajiki tena.