Gọi lại khi DOM được tải trong reac.js

Tôi muốn có một cuộc gọi lại được gọi trên thành phần react.js của tôi khi phần tử DOM (bao gồm tất cả các nút con) thực sự được tải trên trang và sẵn sàng. Cụ thể, tôi có hai thành phần mà tôi muốn hiển thị cùng kích thước, chọn tối đa bất kỳ thành phần nào có kích thước tự nhiên lớn hơn. Có vẻ như componentDidMount không thực sự là những gì tôi muốn bởi vì nó chỉ được gọi một lần cho mỗi thành phần, nhưng tôi muốn gọi lại của tôi được gọi lại bất cứ khi nào thành phần kết thúc hiển thị. Tôi nghĩ rằng tôi có thể thêm sự kiện onLoad vào phần tử DOM cấp cao nhất, nhưng tôi đoán rằng chỉ áp dụng cho một số yếu tố nhất định, như <body> và <img>.Gọi lại khi DOM được tải trong reac.js

Nguồn

2014-09-26 brianmearns

Có vẻ như kết hợp của componentDidMount và componentDidUpdate sẽ hoàn thành công việc. Việc đầu tiên được gọi sau khi hiển thị ban đầu, khi DOM có sẵn, thứ hai được gọi sau khi bất kỳ kết quả hiển thị tiếp theo nào, sau khi DOM cập nhật khả dụng. Trong trường hợp của tôi, cả hai đều yêu cầu họ ủy nhiệm một chức năng chung để làm điều tương tự.

Nguồn

2014-09-26 12:50:23 brianmearns

Tôi đã áp dụng componentDidUpdate vào bảng để có tất cả các cột có cùng chiều cao. nó hoạt động giống như trên $ (window) .load() trong jquery.

ví dụ:

componentDidUpdate: function() { 
     $(".tbl-tr").height($(".tbl-tr ").height()); 
    }

Nguồn

2016-03-31 23:34:04

Thật không may, 'componentDidUpdate' không kêu gọi ban đầu hiển thị, do đó, chức năng của bạn sẽ không được áp dụng cho đến khi đạo cụ hoặc tiểu bang được _changed_: https://reactjs.org/docs/react-comp onent.html # componentdidupdate – brianmearns

Thêm nghe onload trong componentDidMount

class Comp1 extends React.Component { 
constructor(props) { 
    super(props); 
    this.handleLoad = this.handleLoad.bind(this); 
} 

componentDidMount() { 
    window.addEventListener('load', this.handleLoad); 
} 

handleLoad() { 
    $("myclass") // $ is available here 
} 
}

Nguồn

2017-05-02 13:34:09 John

Trong trình duyệt hiện đại, nó phải là như

try() { 
    if (!$("#element").size()) { 
     window.requestAnimationFrame(try); 
    } else { 
     // do your stuff 
    } 
}; 

componentDidMount(){ 
    this.try(); 
}

Nguồn

2018-02-14 11:25:50 pihyper

heh, ngoại trừ trình duyệt hiện đại không sử dụng jquery = P. Đó là mẹo hay về cách sử dụng khung hình động mặc dù giả sử nó nên được cập nhật trực tiếp. – brianmearns

Gọi lại khi DOM được tải trong reac.js

Trả lời

Các vấn đề liên quan