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

اكتشف كيفية إحالة عنصر DOM في React

تعتبر React رائعة في تجريد DOM منك عند إنشاء التطبيقات.

ولكن ماذا لو أردت الوصول إلى عنصر DOM الذي يمثله مكون React؟

ربما يتعين عليك إضافة مكتبة تتفاعل مباشرة مع DOM مثل مكتبة الرسوم البيانية ، أو ربما تحتاج إلى استدعاء بعض واجهة برمجة تطبيقات DOM ، أو إضافة التركيز على عنصر.

مهما كان السبب ، فإن الممارسة الجيدة هي التأكد من عدم وجود طريقة أخرى للقيام بذلك دون الوصول إلى DOM مباشرة.

في JSX للمكون الخاص بك ، يمكنك تعيين مرجع عنصر DOM لخاصية مكون باستخدام هذه السمة:

ref={el => this.someProperty = el}

ضع هذا في السياق ، على سبيل المثال مع ملفbuttonجزء:

<button ref={el => (this.button = el)} />

buttonيشير إلى خاصية المكون ، والتي يمكن استخدامها بعد ذلك بواسطة طرق دورة حياة المكون (أو طرق أخرى) للتفاعل مع DOM:

class SomeComponent extends Component {
  render() {
    return <button ref={el => (this.button = el)} />
  }
}

في مكون الوظيفة ، تكون الآلية هي نفسها ، ما عليك سوى تجنب استخدامthis(نظرًا لأنه لا يشير إلى مثيل المكون) واستخدم خاصية بدلاً من ذلك:

function SomeComponent() {
  let button
  return <button ref={el => (button = el)} />
}

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: