نحوه دسترسی به یک عنصر DOM در React

1. استفاده از refs در React
   1. نمونه‌ای از استفاده از refs در کلاس‌ها:
2. نمونه‌ای از استفاده از refs در کامپوننت‌های تابعی:
3. نکات مهم

برای دسترسی به یک عنصر DOM در React، از مفهوم "ref" استفاده می‌شود که به شما امکان می‌دهد به عناصر خاصی از کامپوننت‌ها دسترسی پیدا کنید. به‌جای استفاده از روش‌های سنتی همچون document.getElementById()، می‌توانید از مراجع (refs) استفاده کنید که راهی بهینه و مناسب برای کار با DOM در React است.

استفاده از refs در React

ابتدا، برای ایجاد یک ref، می‌توانید از React.createRef() در کلاس‌ها و از useRef در کامپوننت‌های تابعی استفاده کنید. سپس، این ref را به عنصر مورد نظر خود نسبت دهید و از آن برای دسترسی به عنصر استفاده کنید.

نمونه‌ای از استفاده از refs در کلاس‌ها:

      class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleClick = () => {
    console.log(this.myRef.current); // دسترسی به عنصر DOM
  }

  render() {
    return (
      <div>
        <div ref={this.myRef}>سلام دنیا</div>
        <button onClick={this.handleClick}>نمایش عنصر</button>
      </div>
    );
  }
}

    

نمونه‌ای از استفاده از refs در کامپوننت‌های تابعی:

      import React, { useRef } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  const handleClick = () => {
    console.log(myRef.current); // دسترسی به عنصر DOM
  };

  return (
    <div>
      <div ref={myRef}>سلام دنیا</div>
      <button onClick={handleClick}>نمایش عنصر</button>
    </div>
  );
};

    

نکات مهم

• دسترسی به DOM: برای دسترسی به عنصر، به سادگی می‌توانید از this.myRef.current در کلاس‌ها و myRef.current در کامپوننت‌های تابعی استفاده کنید.
• به‌روز نبودن refs: اگر شما نیاز به انجام عملیات یا به‌روزرسانی محتوای DOM دارید، می‌توانید از useEffect برای نظارت بر تغییرات استفاده کنید.
• نسخه های جدید جدید: از React 16.8 به بعد، استفاده از hook ها مانند useRef بسیار محبوب شده است و می‌توانید به راحتی عناصر را مدیریت کنید.