Làm thế nào để có thể tạo ref trong React?

Trong ReactJS, ref là một cách để truy cập trực tiếp một nút DOM hoặc một instance của một component trong React. Để tạo ref, bạn có thể sử dụng React.createRef() trong class components hoặc useRef() hook trong function components.

Class Components

Trong class components, bạn thường tạo ref bằng cách sử dụng React.createRef() trong constructor và sau đó gắn ref này vào một phần tử JSX bằng cách sử dụng thuộc tính ref.

import React, { Component } from 'react';

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

  componentDidMount() {
    console.log(this.myRef.current); // Truy cập đến nút DOM hoặc component instance
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

Function Components

Trong function components, bạn có thể sử dụng useRef() hook để tạo ref. useRef trả về một đối tượng ref mà bạn có thể gắn vào phần tử JSX.

import React, { useRef, useEffect } from 'react';

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

  useEffect(() => {
    console.log(myRef.current); // Truy cập đến nút DOM
  }, []);

  return <div ref={myRef}>Hello, World!</div>;
}

Trong cả hai trường hợp, ref sẽ có một thuộc tính current mà thông qua đó bạn có thể truy cập đến nút DOM hoặc instance của component mà ref đã được gắn vào.

Lưu ý

• Sử dụng ref chỉ khi thực sự cần thiết, ví dụ như để quản lý focus, chọn văn bản, hoặc thực hiện các thao tác truyền thống với DOM mà không thể thực hiện thông qua cơ chế state và props của React.
• Tránh sử dụng ref để "hỏi" về trạng thái của component con, thay vào đó, nên sử dụng các cơ chế dữ liệu từ trên xuống như props hoặc context.

Tóm lại, ref trong ReactJS là một công cụ mạnh mẽ cho phép bạn truy cập trực tiếp vào nút DOM hoặc instance của component, nhưng nên được sử dụng một cách cẩn thận và hợp lý.