Cách tham chiếu phần tử DOM trong React

Tìm hiểu cách giới thiệu phần tử DOM trong React

React rất tốt trong việc loại bỏ DOM khỏi bạn khi xây dựng ứng dụng.

Nhưng điều gì sẽ xảy ra nếu bạn muốn truy cập phần tử DOM mà một thành phần React đại diện?

Có thể bạn phải thêm một thư viện tương tác trực tiếp với DOM như thư viện biểu đồ, có thể bạn cần gọi một số API DOM hoặc thêm tiêu điểm vào một phần tử.

Dù lý do là gì, một phương pháp hay là đảm bảo rằng không có cách nào khác để làm như vậy mà không truy cập trực tiếp vào DOM.

Trong JSX của thành phần của bạn, bạn có thể gán tham chiếu của phần tử DOM cho thuộc tính thành phần bằng cách sử dụng thuộc tính này:

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

Đặt điều này vào ngữ cảnh, ví dụ với mộtbuttonthành phần:

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

buttonđề cập đến một thuộc tính của thành phần, sau đó có thể được sử dụng bởi các phương thức vòng đời của thành phần (hoặc các phương pháp khác) để tương tác với DOM:

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

Trong một thành phần chức năng, cơ chế giống nhau, bạn chỉ cần tránh sử dụngthis(vì nó không trỏ đến cá thể thành phần) và sử dụng một thuộc tính để thay thế:

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

Tải xuống miễn phí của tôiSổ tay React

Cách tham chiếu phần tử DOM trong React

Tìm hiểu cách giới thiệu phần tử DOM trong React

Các hướng dẫn về phản ứng khác: