Rückruf beim Laden von DOM in react.js

Ich möchte eine Rückruffunktion für meine react.js-Komponente aufrufen, wenn das DOM-Element (einschließlich aller untergeordneten Knoten) tatsächlich auf der Seite geladen und bereit ist. Genauer gesagt, habe ich zwei Komponenten, die dieselbe Größe wiedergeben sollen, indem ich das Maximum der Komponente mit der größeren natürlichen Größe auswähle.Rückruf beim Laden von DOM in react.js

Es sieht aus wie componentDidMount ist nicht wirklich, was ich will, weil es nur einmal pro Komponente aufgerufen wird, aber ich möchte, dass mein Rückruf immer wieder aufgerufen wird, wenn die Komponente fertig Rendering ist. Ich dachte, ich könnte ein Ereignis onLoad zum Top-Level-DOM-Element hinzufügen, aber ich denke, das gilt nur für bestimmte Elemente, wie <body> und <img>.

Quelle

2014-09-26 brianmearns

Sieht aus wie eine Kombination von componentDidMount und componentDidUpdate wird die Arbeit erledigt. Das erste wird nach dem anfänglichen Rendern aufgerufen, wenn das DOM verfügbar ist, das zweite wird nach jedem nachfolgenden Rendern aufgerufen, sobald das aktualisierte DOM verfügbar ist. In meinem Fall habe ich beide sie zu einer gemeinsamen Funktion delegieren, um das Gleiche zu tun.

Quelle

2014-09-26 12:50:23 brianmearns

Ich habe ComponentDidUpdate auf Tabelle angewendet, um alle Spalten dieselbe Höhe zu haben. Es funktioniert genauso wie bei $ (window) .load() in jquery.

zB:

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

Quelle

2016-03-31 23:34:04

Leider sein, 'componentDidUpdate' nicht für die erste genannt wird rendern, also wird Ihre Funktion erst angewendet, wenn die Requisiten oder der Status _changed_ sind: https://reactjs.org/docs/react-comp onent.html #componentdidupdate – brianmearns

onload Zuhörer hinzufügen in 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 
} 
}

Quelle

2017-05-02 13:34:09 John

In modernen Browsern, sollte es wie

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

componentDidMount(){ 
    this.try(); 
}

Quelle

2018-02-14 11:25:50 pihyper

heh, außer moderne Browser verwenden jquery = P nicht. Es ist ein guter Tipp, den Animationsrahmen zu verwenden, vorausgesetzt, es sollte live aktualisiert werden. – brianmearns

Rückruf beim Laden von DOM in react.js

Antwort

Verwandte Themen