كيفية تحديد عنصر DOM في React؟ ما هو معادل document.getElementById() في React

في React، على عكس العمل مع Vanilla JavaScript، فإن الوصول إلى عناصر DOM مباشرةً يختلف. تستخدم React DOM افتراضيًا لتحديث DOM الحقيقي بكفاءة، وهذا ما يجعله مختلفًا عن JavaScript الفانيليا.

كيفية الوصول إلى عنصر DOM

الخيار 1: استخدام المراجع

• استخدم المراجع مع مكونات الوظيفة:(الإصدار 16.8.0) استخدم useRef وforwardRef. حدد المرجع باستخدام useRef ثم أعد توجيهه إلى عنصر DOM باستخدام ForwardRef. للوصول إلى العنصر، استخدم الخاصية الحالية للمرجع (ref.current).

الخيار 2: استخدام React.createRef (v16.3 )

أنشئ مرجعًا باستخدام React.createRef() وأرفقه بعنصر للوصول إليه لاحقًا. استخدم ref.current للحصول على عقدة DOM.

الخيار 3: استخدام نمط رد الاتصال (قديم)

تحديد سمة المرجع في JSX العنصر وتمرير وظيفة رد الاتصال التي تتلقى المرجع إلى عنصر DOM.

الخيار 4: استخدام مراجع السلسلة (قديم)

استخدم مراجع السلسلة عن طريق تعيين سمة المرجع إلى سلسلة تحدد عنصر DOM. قم بالوصول إلى العنصر باستخدام this.refs.[stringRef].

• مثال

يوجد أدناه مثال لاستخدام نمط رد الاتصال لتحديد عنصر DOM:

render () { يعود (

  render() {
    return (