Làm thế nào để thiết lập trạng thái thành phần React và đạo cụ từ trình duyệt

Question

Có khả năng truy cập và thiết lập trạng thái và đạo cụ của thành phần React hiện có thông qua trình duyệt (từ bên trong tập lệnh khác hoặc qua bàn điều khiển) không?

Tôi biết có một cách với Angular để truy cập phạm vi và thay đổi các biến, nhưng với React tôi đã không thể tìm được cách.

Tôi cho rằng phải có cách nào đó vì phần mở rộng Công cụ dành cho nhà phát triển React từ Facebook có thể nhận tất cả thông tin (Đạo cụ, Nhà nước, Thành phần, Trình nghe sự kiện) từ các thành phần React trên trang, với khả năng thay đổi chúng.

Nếu có khả năng thực hiện điều này thông qua JavaScript, đó sẽ là cách để làm điều đó?

Answer 1

Để thiết lập nhà nước từ trình duyệt của bạn, dính vào một nơi nào đó trong thành phần của bạn, giống như trong render():

globalSetState = function(state){this.setState(state)}.bind(this); 

Lưu ý: Điều quan trọng là bạn phải rời khỏi var, vì đây là những gì làm cho các chức năng được xác định truy cập trên toàn cầu .

Bây giờ bạn có thể gọi globalSetState({x: 'y'}) trong bảng điều khiển của mình.

Cảnh báo: Điều này thật điên rồ và giống như console.log() để gỡ lỗi, nên bị xóa trong ứng dụng trực tiếp của bạn.

Answer 2

Để đặt trạng thái của thành phần phản ứng từ trình duyệt, bạn có thể liên kết một hàm với đối tượng cửa sổ sẽ kích hoạt trạng thái đã đặt.

Trong hàm tạo của thành phần phản ứng, bạn có thể thực hiện việc này.

constructor (props){ 
    super(props); 
    window.changeComponentState = (stateObject) => { 
     this.setState ({stateObject}); 
    } 
} 

Trong trình duyệt giao diện điều khiển, bạn có thể làm điều này.

window.changeComponentState ({a:'a'}); 

CẢNH BÁO: Đây là kiểu chống. Điều này sẽ làm việc, nhưng bạn không bao giờ nên làm điều này.