forwardRef และ useImperativeHandle ใช้สำหรับอะไร?

Question

Accepted Answer

ref ที่ส่งผ่านไปยังคอมโพเนนต์ที่กำหนดเอง **ไม่** ไปถึงโหนด DOM ข้างในโดยอัตโนมัติ **`forwardRef`** ให้คอมโพเนนต์รับ ref และแนบมันไปยังองค์ประกอบลูก **`useImperativeHandle`** ปรับแต่ง *สิ่งที่* ref นั้นเปิดเผย ## ส่งต่อ ref ไปยังโหนด 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(); ``` ## เปิดเผย API ที่กำหนดเองแทนโหนดดิบ บางครั้งคุณไม่ต้องการเปิดเผยโหนด DOM ทั้งหมด — เพียงเมธอดเฉพาะเจาะจง: ```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(); ``` ## เมื่อใดควรใช้งาน (ใช้อย่างคำนึงถึง) สนับสนุน props/state สำหรับการสื่อสาร หันไปใช้ refs เพื่อความต้องการ **จำเป็น** ที่แท้จริง: การจัดการโฟกัส การเลื่อน การเลือกข้อความ การเล่นสื่อ หรือการรวมไลบรารี่ที่จำเป็น หมายเหตุ: ใน **React 19** สามารถส่งต่อ `ref` เป็น prop ปกติได้ ดังนั้น `forwardRef` มักจะไม่จำเป็นอีกต่อไป