كيفية استخدام خطاف useRef React

تعرف على فائدة خطاف useRef React وكيفية التعامل معها!

تحقق من بلديرد فعل الخطافات مقدمةأولاً ، إذا كنت جديدًا عليهم.

خطاف React واحد استخدمه أحيانًاuseRef.

import React, { useRef } from 'react'

يسمح لنا هذا الخطاف بالوصول إلى عنصر DOM بشكل إلزامي.

فيما يلي مثال ، حيث أسجل إلى وحدة التحكم قيمة مرجع DOM لعنصر الامتداد الذي يحتوي على قيمة العد:

import React, { useState, useRef } from 'react'

const Counter = () => { const [count, setCount] = useState(0) const counterEl = useRef(null)

const increment = () => { setCount(count + 1) console.log(counterEl) }

return ( <> Count: <span ref={counterEl}>{count}</span> <button onClick={increment}>+</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

لاحظ الconst counterEl = useRef(null)الخط و<span ref={counterEl}>{count}</span>. هذا هو ما يحدد الارتباط.

الآن يمكننا الوصول إلى مرجع DOM من خلال الوصول إلىcounterEl.current.

شاهده على Codepen:

انظر القلمرد الفعل الاستخدامبقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.

Tech Wiki Online!