Làm cách nào để bạn kiểm tra đạo cụ và trạng thái của phần tử phản ứng trong bảng điều khiển?

Question

React Developer Tools cung cấp nhiều quyền kiểm tra cây thành phần React và xem các đạo cụ, trình xử lý sự kiện, v.v. Tuy nhiên, điều tôi thực sự muốn làm là kiểm tra các cấu trúc dữ liệu đó trong bảng điều khiển trình duyệt.

Trong chrome tôi có thể phát với phần tử DOM hiện được chọn trong bảng điều khiển bằng cách sử dụng $0. Có cách nào để trích xuất thông tin thành phần React từ $0, hoặc là nó có thể làm một cái gì đó tương tự với các công cụ phản ứng Dev?

Answer 1

Một câu trả lời cho câu hỏi của bạn có thể được tìm thấy ở đây trong một câu hỏi tương tự như tôi hỏi: React - getting a component from a DOM element for debugging

tôi cung cấp một câu trả lời ở đây bởi vì tôi không có điểm uy tín cần thiết để đánh dấu là trùng lặp hoặc để bình luận ở trên.

Về cơ bản, điều này là có thể nếu bạn đang sử dụng xây dựng phát triển phản ứng bởi vì bạn có thể tận dụng TestUtils để đạt được mục tiêu của mình.

Bạn cần phải làm chỉ có hai điều:

• Tĩnh lưu trữ các thành phần cấp cơ bạn nhận được từ React.render().
• Tạo một hàm trợ giúp gỡ lỗi toàn cục mà bạn có thể sử dụng trong bảng điều khiển với $ 0 để truy cập thành phần tĩnh của bạn.

Vì vậy, các mã trong giao diện điều khiển có thể giống như thế:

> getComponent($0).props 

Việc thực hiện getComponent có thể sử dụng React.addons.TestUtils.findAllInRenderedTree để tìm kiếm trận đấu bằng cách gọi getDOMNode trên tất cả các thành phần được tìm thấy và phù hợp chống lại trôi qua trong phần tử .

Answer 2

Gán trạng thái hoặc đối tượng chống đỡ để các đối tượng cửa sổ:

window.title = this.state.title 

Và sau đó từ các công cụ dev console bạn có thể thử phương pháp khác nhau về đối tượng tiếp xúc như:

window.title.length