Trong luồng dữ liệu React điển hình, props là cách duy nhất mà các component cha tương tác với các component con của chúng. Để sửa đổi một đứa trẻ, bạn kết xuất lại nó với các đạo cụ mới. Tuy nhiên, có một vài trường hợp bạn cần phải sửa đổi một cách bắt buộc một đứa trẻ bên ngoài luồng dữ liệu thông thường. Đứa trẻ được sửa đổi có thể là một thể hiện của thành phần React hoặc nó có thể là một phần tử DOM. Đối với cả hai trường hợp này, React cung cấp một lối thoát
Khi nào nên sử dụng giới thiệu
Có một vài trường hợp sử dụng tốt cho giới thiệu
- 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 hình ảnh động bắt buộc
- Tích hợp với các thư viện DOM của bên thứ ba
Tránh sử dụng ref cho bất cứ điều gì có thể được thực hiện một cách khai báo
Ví dụ: thay vì hiển thị các phương thức
class MyComponent extends React.Component {
constructor[props] {
super[props];
this.myRef = React.createRef[]; }
render[] {
return ; }
}
7 và const node = this.myRef.current;
0 trên thành phần const node = this.myRef.current;
1, hãy chuyển một giá trị const node = this.myRef.current;
2 cho nóĐừng lạm dụng giới thiệu
Xu hướng đầu tiên của bạn có thể là sử dụng các lượt giới thiệu để “làm cho mọi thứ xảy ra” trong ứng dụng của bạn. Nếu đây là trường hợp, hãy dành một chút thời gian và suy nghĩ chín chắn hơn về nơi nên sở hữu trạng thái trong hệ thống phân cấp thành phần. Thông thường, rõ ràng là vị trí thích hợp để “sở hữu” trạng thái đó nằm ở cấp cao hơn trong hệ thống phân cấp. Xem hướng dẫn Nâng trạng thái lên để biết ví dụ về điều này
Ghi chú
Các ví dụ bên dưới đã được cập nhật để sử dụng API
3 được giới thiệu trong React 16. 3. Nếu bạn đang sử dụng bản phát hành trước của React, chúng tôi khuyên bạn nên sử dụng giới thiệu gọi lại để thay thếconst node = this.myRef.current;
Tạo giới thiệu
Các tham chiếu được tạo bằng cách sử dụng
const node = this.myRef.current;
3 và được đính kèm với các phần tử React thông qua thuộc tính const node = this.myRef.current;
5. Các tham chiếu thường được gán cho một thuộc tính thể hiện 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ầnclass MyComponent extends React.Component {
constructor[props] {
super[props];
this.myRef = React.createRef[]; }
render[] {
return ; }
}
Truy cập giới thiệu
Khi một ref được chuyển đến một phần tử trong
const node = this.myRef.current;
6, một tham chiếu đến nút sẽ có thể truy cập được tại thuộc tính const node = this.myRef.current;
7 của refconst node = this.myRef.current;
Giá trị của ref khác nhau tùy thuộc vào loại nút
- Khi thuộc tính
5 được sử dụng trên một phần tử HTML, thìconst node = this.myRef.current;
5 được tạo trong hàm tạo vớiconst node = this.myRef.current;
3 sẽ nhận phần tử DOM bên dưới làm thuộc tínhconst node = this.myRef.current;
7 của nóconst node = this.myRef.current;
- Khi thuộc tính
5 được sử dụng trên một thành phần lớp tùy chỉnh, đối tượngconst node = this.myRef.current;
5 sẽ nhận thể hiện được gắn kết của thành phần đó làconst node = this.myRef.current;
7 của nóconst node = this.myRef.current;
- Bạn không thể sử dụng thuộc tính
5 trên các thành phần chức năng vì chúng không có phiên bảnconst node = this.myRef.current;
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
Đoạn mã này sử dụng một
const node = this.myRef.current;
5 để lưu trữ tham chiếu đến một nút DOMconst node = this.myRef.current;
9React sẽ gán thuộc tính
const node = this.myRef.current;
7 với phần tử DOM khi thành phần được gắn kết và gán lại cho const node = this.myRef.current;
98 khi nó ngắt kết nối. Cập nhật const node = this.myRef.current;
5 xảy ra trước các phương thức vòng đời của const node = this.myRef.current;
30 hoặc const node = this.myRef.current;
31Thêm một tham chiếu vào một thành phần lớp
Nếu chúng tôi muốn bọc
const node = this.myRef.current;
32 ở trên để mô phỏng nó được nhấp ngay sau khi gắn, chúng tôi có thể sử dụng một ref để có quyền truy cập vào đầu vào tùy chỉnh và gọi thủ công phương thức const node = this.myRef.current;
33 của nóconst node = this.myRef.current;
3Lưu ý rằng điều này chỉ hoạt động nếu
const node = this.myRef.current;
32 được khai báo là một lớpconst node = this.myRef.current;
9Tham chiếu và các thành phần chức năng
Theo mặc định, bạn không thể sử dụng thuộc tính
const node = this.myRef.current;
5 trên các thành phần chức năng vì chúng không có phiên bảnconst node = this.myRef.current;
1Nếu bạn muốn cho phép mọi người lấy một
const node = this.myRef.current;
5 cho thành phần chức năng của mình, bạn có thể sử dụng ________ 237 [có thể kết hợp với ________ 238] hoặc bạn có thể chuyển đổi thành phần này thành một lớpTuy nhiên, bạn có thể sử dụng thuộc tính
const node = this.myRef.current;
5 bên trong một thành phần chức năng miễn là bạn tham chiếu đến một thành phần DOM hoặc một thành phần lớpconst node = this.myRef.current;
6Hiển thị tham chiếu DOM cho các thành phần gốc
Trong một số ít trường hợp, 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 cha. Đ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 tham chiếu vào thành phần con nhưng đây không phải là giải pháp lý tưởng vì bạn sẽ chỉ nhận được một phiên bản thành phần chứ không phải 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 giới thiệu 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 chọn tham gia hiển thị bất kỳ tham chiếu nào của thành phần con là của riêng 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 con của thành phần cha trong tài liệu chuyển tiếp giới thiệu
Nếu bạn sử dụng React 16. 2 trở xuống hoặc nếu bạn cần linh hoạt hơn so với tính năng được cung cấp bởi chuyển tiếp giới thiệu, bạn có thể sử dụng phương pháp thay thế này và chuyển một giới thiệu rõ ràng dưới dạng chỗ dựa 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 hiểm hữu ích. Lưu ý rằng phương pháp 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 kiểm soát được 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
const node = this.myRef.current;
90, nhưng nó không được khuyến khích và không dùng nữa trong const node = this.myRef.current;
91Giới thiệu gọi lại
React cũng hỗ trợ một cách khác để đặt giới thiệu được gọi là "gọi lại giới thiệu", cho phép kiểm soát chi tiết hơn khi đặt và bỏ đặt giới thiệu.
Thay vì truyền một thuộc tính
const node = this.myRef.current;
5 được tạo bởi const node = this.myRef.current;
93, bạn truyền một hàm. Hàm nhận thể hiện thành phần React hoặc phần tử HTML DOM làm đối số của nó, có thể được lưu trữ và truy cập ở nơi khácVí dụ dưới đây triển khai một mẫu chung. sử dụng lệnh gọi lại
const node = this.myRef.current;
5 để lưu trữ tham chiếu đến nút DOM trong thuộc tính cá thểconst node = this.myRef.current;
2React sẽ gọi hàm gọi lại
const node = this.myRef.current;
5 với phần tử DOM khi thành phần được gắn kết và gọi nó bằng const node = this.myRef.current;
98 khi nó ngắt kết nối. Các giới thiệu được đảm bảo được cập nhật trước các vụ hỏa hoạn const node = this.myRef.current;
30 hoặc const node = this.myRef.current;
31Bạn có thể chuyển các tham chiếu gọi lại giữa các thành phần như bạn có thể làm với các tham chiếu đối tượng được tạo bằng
const node = this.myRef.current;
3const node = this.myRef.current;
8Trong ví dụ trên,
const node = this.myRef.current;
10 chuyển cuộc gọi lại ref của nó dưới dạng chỗ dựa const node = this.myRef.current;
11 cho const node = this.myRef.current;
32 và const node = this.myRef.current;
32 chuyển chức năng tương tự như thuộc tính const node = this.myRef.current;
5 đặc biệt cho const node = this.myRef.current;
15. Do đó, const node = this.myRef.current;
16 trong const node = this.myRef.current;
10 sẽ được đặt thành nút DOM tương ứng với phần tử const node = this.myRef.current;
15 trong const node = this.myRef.current;
32API kế thừa. Tham chiếu chuỗi
Nếu bạn đã làm việc với React trước đây, bạn có thể quen thuộc với một API cũ hơn trong đó thuộc tính
const node = this.myRef.current;
5 là một chuỗi, chẳng hạn như const node = this.myRef.current;
61 và nút DOM được truy cập là const node = this.myRef.current;
62. Chúng tôi khuyên bạn không nên làm như vậy vì giới thiệu chuỗi có một số vấn đề, được coi là di sản và có khả năng bị xóa trong một trong các bản phát hành trong tương laiGhi chú
Nếu bạn hiện đang sử dụng
62 để truy cập các lượt giới thiệu, chúng tôi khuyên bạn nên sử dụng mẫu gọi lại hoặc APIconst node = this.myRef.current;
64 để thay thếconst node = this.myRef.current;
Hãy cẩn thận với giới thiệu gọi lại
Nếu gọi lại
const node = this.myRef.current;
5 được định nghĩa là một hàm nội tuyến, nó sẽ được gọi hai lần trong quá trình cập nhật, lần đầu tiên với const node = this.myRef.current;
98 và sau đó một lần nữa với phần tử DOM. Điều này là do một phiên bản mới của chức năng được tạo với mỗi kết xuất, vì vậy React cần xóa ref cũ và thiết lập cái mới. Bạn có thể tránh điều này bằng cách định nghĩa hàm gọi lại const node = this.myRef.current;
5 như một phương thức ràng buộc trên lớp, nhưng lưu ý rằng nó không quan trọng trong hầu hết các trường hợp