Ref trong Reactjs là gì? Cùng giải mã ngay thông tin về Ref trong Reactjs

Khi nào sử dụng Refs trong ReactJS

Có một số trường hợp có thể sử dụng refs:

• Quản lý tiêu điểm, lựa chọn văn bản hoặc phát lại phương tiện.
• Kích hoạt các hoạt ảnh bắt buộc.
• Tích hợp với thư viện DOM của bên thứ ba.

Tránh sử dụng refs cho bất kỳ thứ gì có thể được thực hiện một cách khai báo.

Ví dụ, thay vì hiển thị open()và close()các phương thức trên một Dialogthành phần, hãy chuyển một phương thức isOpenhỗ trợ cho nó.

>>> Đọc thêm: State trong ReactJS

Đừng lạm dụng Refs trong ReactJS

Xu hướng đầu tiên của bạn có thể là sử dụng refs để “làm cho mọi thứ xảy ra” trong ứng dụng của bạn. Nếu đúng như vậy, hãy dành một chút thời gian và suy nghĩ chín chắn hơn về vị trí mà trạng thái nên được sở hữu trong hệ thống phân cấp thành phần. Thông thường, rõ ràng là nơi thích hợp để “sở hữu” trạng thái đó là ở cấp cao hơn trong hệ thống phân cấp. Xem hướng dẫn Lifting State Up để biết các ví dụ về điều này.

Tạo Refs

Refs được tạo bằng cách sử dụng React.createRef()và gắn vào các phần tử React thông qua refthuộc tính. Các Refs thường được gán cho một thuộc tính instance khi một thành phần được xây dựng để chúng có thể được tham chiếu trong toàn bộ thành phần.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();  }
  render() {
    return <div ref={this.myRef} />;  }
}

Truy cập Refs trong ReactJS

Khi một rendertham chiếu được chuyển cho một phần tử trong , một tham chiếu đến nút sẽ có thể truy cập được tại currentthuộc tính của tham chiếu .

const node = this.myRef.current;

Giá trị của tham chiếu khác nhau tùy thuộc vào loại nút:

• Khi refthuộc tính được sử dụng trên một phần tử HTML, thì phần tử refđược tạo trong phương thức khởi tạo với React.createRef()sẽ nhận phần tử DOM bên dưới làm thuộc tính của nó current.
• Khi refthuộc tính được sử dụng trên một thành phần lớp tùy chỉnh, refđối tượng sẽ nhận thể hiện được gắn kết của thành phần đó làm thành phần của nó current.
• Bạn không thể sử dụng refthuộc tính trên các thành phần hàm vì chúng không có phiên bản.

Các ví dụ dưới đây chứng minh sự khác biệt.

Thêm một tham chiếu vào một phần tử DOM

Mã này sử dụng một refđể lưu trữ một tham chiếu đến một nút DOM:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

React sẽ gán thuộc currenttính với phần tử DOM khi thành phần này gắn kết và gán lại cho nullnó khi nó ngắt kết nối. refcập nhật xảy ra trước componentDidMounthoặc componentDidUpdatecác phương pháp vòng đời.

Thêm một tham chiếu vào một thành phần lớp

Nếu chúng tôi muốn kết thúc phần CustomTextInputtrên để mô phỏng nó được nhấp ngay sau khi gắn, chúng tôi có thể sử dụng một tham chiếu để truy cập vào đầu vào tùy chỉnh và gọi focusTextInputphương thức của nó theo cách thủ công:

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

  componentDidMount() {
    this.textInput.current.focusTextInput();  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />    );
  }
}

Lưu ý rằng điều này chỉ hoạt động nếu CustomTextInputđược khai báo là một lớp:

class CustomTextInput extends React.Component {  // ...
}

Refs trong ReactJS và các thành phần chức năng

Theo mặc định, bạn không thể sử dụng refthuộc tính trên các thành phần hàm vì chúng không có các phiên bản:

function MyFunctionComponent() { return <input />; } class Parent extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); } render() { // This will *not* work! return ( <MyFunctionComponent ref={this.textInput} /> ); } }

Nếu bạn muốn cho phép mọi người sử dụng một refthành phần chức năng của mình, bạn có thể sử dụng forwardRef(có thể kết hợp với useImperativeHandle) hoặc bạn có thể chuyển đổi thành phần này thành một lớp.

Tuy nhiên, bạn có thể sử dụng refthuộc tính bên trong một thành phần hàm miễn là bạn tham chiếu đến phần tử DOM hoặc thành phần lớp:

function CustomTextInput(props) { // textInput must be declared here so the ref can refer to it const textInput = useRef(null); function handleClick() { textInput.current.focus(); } return ( <div> <input type="text" ref={textInput} /> <input type="button" value="Focus the text input" onClick={handleClick} /> </div> ); }

Hiển thị DOM Refs trong ReactJs cho các thành phần chính

Trong một số trường hợp hiếm hoi, bạn có thể muốn có quyền truy cập vào nút DOM của một đứa trẻ từ một thành phần chính. Điều này thường không được khuyến nghị vì nó phá vỡ tính đóng gói của thành phần, nhưng đôi khi nó có thể hữu ích để kích hoạt tiêu điểm hoặc đo kích thước hoặc vị trí của nút DOM con.

Mặc dù bạn có thể thêm một tham chiếu vào thành phần con , nhưng đây không phải là một giải pháp lý tưởng, vì bạn sẽ chỉ nhận được một cá thể thành phần chứ không phải là một nút DOM. Ngoài ra, điều này sẽ không hoạt động với các thành phần chức năng.

Nếu bạn sử dụng React 16.3 trở lên, chúng tôi khuyên bạn nên sử dụng chuyển tiếp ref cho những trường hợp này. Chuyển tiếp tham chiếu cho phép các thành phần lựa chọn để hiển thị bất kỳ tham chiếu nào của thành phần con là của chính chúng . Bạn có thể tìm thấy một ví dụ chi tiết về cách hiển thị nút DOM của con với thành phần chính trong tài liệu chuyển tiếp ref .

Nếu bạn sử dụng React 16.2 trở xuống hoặc nếu bạn cần sự linh hoạt hơn so với chuyển tiếp ref, bạn có thể sử dụng cách tiếp cận thay thế này và chuyển một cách rõ ràng một ref dưới dạng một prop có tên khác.

Khi có thể, chúng tôi khuyên bạn không nên để lộ các nút DOM, nhưng nó có thể là một lối thoát hữu ích. Lưu ý rằng cách tiếp cận này yêu cầu bạn thêm một số mã vào thành phần con. Nếu bạn hoàn toàn không có quyền kiểm soát việc triển khai thành phần con, tùy chọn cuối cùng của bạn là sử dụng findDOMNode(), nhưng nó không được khuyến khích và không được dùng nữa StrictMode.

Trên đây là một số thông tin về Ref trong ReactJs bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs và các khóa học lập trình khác của Viện công nghệ thông tin T3H.