Cách lấy React Instance từ Dom Node

Trước thập kỷ này, hầu hết các trang web được xây dựng bằng jQuery, nếu chúng tôi muốn kiểm tra hoặc bỏ qua một số xác thực, chúng tôi có thể chỉnh sửa trực tiếp nút Dom để mọi thứ được thể hiện trong Dom.

Nhưng mọi thứ đã thay đổi, ngày càng có nhiều website build bằng React vì nhiều lý do, để chỉnh sửa Dom node không ảnh hưởng gì đến ứng dụng. React sẽ giám sát các giá trị của trạng thái của từng thành phần bằng Virtual Dom. Khi trạng thái được thay đổi, React sẽ tìm cách ít tốn kém nhất để cập nhật nút Dom.

Như chúng ta đã biết, chúng ta có thể sử dụng tiện ích mở rộng của chrome — React Developer Tools để gỡ lỗi ứng dụng React và chúng ta có thể thay đổi trạng thái của thành phần React bằng công cụ này. Liệu có cách nào để chỉnh sửa trạng thái của thành phần React thông qua Javascript đơn giản hay không.

Trong bài viết này, chúng ta sẽ thảo luận cách lấy phiên bản React từ nút Dom có ​​thể được sử dụng để lấy trạng thái hoặc đạo cụ của thành phần React.

Hiển thị trường hợp

Nếu chúng ta muốn sử dụng thành phần Toastcủa Excalidraw để hiển thị nội dung nào đó, chúng ta có thể thực hiện như bên dưới:

Nếu bạn đã quen thuộc với React Developer Tools, bạn có thể chỉnh sửa trạng thái trực tiếp bằng công cụ này:

Nhận phiên bản thành phần React từ nút Dom

Khi tôi phát triển các dự án Vue.js, tôi biết rằng chúng ta có thể lấy phiên bản Vue.js từ nút Dom bằng cách sử dụng thuộc __vue_app__tính:

Như chúng ta đã biết, chúng ta có thể lấy the __để đại diện cho sở hữu tư nhân. Và tôi cố gắng tìm xem dự án của Dom of React có tài sản riêng nào không:

Vâng, thuộc tính __reactContainer$xxxxdường như là một biến liên quan đến React. Sau đó, tôi cố gắng tìm kiếm nó trong mã nguồn React:

Có một số khóa nội bộ được sử dụng để lưu trữ phiên bản hoặc đạo cụ của thành phần.

Chúng ta có thể lấy cá thể thành phần thông qua thuộc __reactFiber${randomKey}tính của nút Dom:

Đối với thành phần lớp, việc chỉnh sửa trạng thái rất thuận tiện, nhưng đối với thành phần chức năng, nó không hỗ trợ chỉnh sửa trạng thái được tạo bởi các móc.

Bạn có thể kiểm tra điều này trên Codepen.io :

Phần kết luận

Trong bài viết này, chúng ta tìm hiểu cách lấy phiên bản thành phần React từ nút Dom:

1. Nhận các phím nút Dom bằng cáchObject.keys(DomNode)
2. Lọc khóa startedWith__reactFiber
3. Lấy phiên bản thành phần React bằng khóa đã lọc

Thêm nội dung tại PlainEnglish.io .

Đăng ký nhận bản tin miễn phí hàng tuần của chúng tôi . Theo dõi chúng tôi trên Twitter , LinkedIn , YouTube và Discord .

Nâng cao nhận thức và áp dụng cho công ty khởi nghiệp công nghệ của bạn với Circuit .