Richiamata quando il DOM viene caricato in react.js

Voglio avere una richiamata invocata sul mio componente react.js quando il suo elemento DOM (inclusi tutti i nodi figli) è effettivamente caricato nella pagina e pronto. Nello specifico, ho due componenti che voglio rendere delle stesse dimensioni, scegliendo il massimo di qualsiasi componente abbia la dimensione naturale più grande.Richiamata quando il DOM viene caricato in react.js

Sembra che componentDidMount non sia realmente quello che voglio perché è chiamato solo una volta per componente, ma voglio che il mio callback venga richiamato ogni volta che il componente ha finito il rendering. Ho pensato di aggiungere un eventoall'elemento DOM di livello superiore, ma suppongo che si applichi solo a determinati elementi, ad esempio <body> e <img>.

fonte

2014-09-26 brianmearns

Sembra che una combinazione di componentDidMount e componentDidUpdate svolgerà il lavoro. Il primo è chiamato dopo il rendering iniziale, quando il DOM è disponibile, il secondo è chiamato dopo ogni successivo rendering, una volta che il DOM aggiornato è disponibile. Nel mio caso, li ho entrambi delegati a una funzione comune per fare la stessa cosa.

fonte

2014-09-26 12:50:23 brianmearns

Ho applicato componentDidUpdate alla tabella per avere tutte le colonne della stessa altezza. funziona come su $ (window) .load() in jquery.

esempio:

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

fonte

2016-03-31 23:34:04

Purtroppo, 'componentDidUpdate' non viene chiamato per la prima render, quindi la tua funzione non sarà applicata fino a quando i props o lo stato non sono _changed_: https://reactjs.org/docs/react-comp onent.html # componentdidupdate – brianmearns

Aggiungi ascoltatore onload 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 
} 
}

fonte

2017-05-02 13:34:09 John

Nel browser moderni, dovrebbe essere come

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

componentDidMount(){ 
    this.try(); 
}

fonte

2018-02-14 11:25:50 pihyper

heh, eccetto che i browser moderni non usano jquery = P. È un buon consiglio usare il frame dell'animazione, supponendo che dovrebbe essere un aggiornamento dal vivo. – brianmearns

Richiamata quando il DOM viene caricato in react.js

risposta

Problemi correlati