2016-02-05 16 views
20

Ho un elemento con un ref che viene definito e finisce per ottenere rese nella pagina:this.refs.something restituisce "non definito"

<div ref="russian" ...> 
     ... 
    </div> 

voglio accedere alle proprietà degli elementi DOM come offset... o qualcosa . Tuttavia, continuo a ricevere undefined e non ho la più pallida idea del perché. Dopo alcune ricerche è chiaro che refs sono applicabili solo a un file, ma non lo sto usando da nessuna parte oltre a questa pagina. Sto dicendo questo per accedere esso:

console.log('REFS', this.refs.russian);

cosa potrebbe causare questo?

+0

this.refs sarebbe la stringa "russo" (supponendo che si sta nel campo di applicazione a destra), non un oggetto , quindi non avrebbe una proprietà di "russo" –

+2

@Pamblam in reactjs ref è un riferimento a un elemento dom. Diventa accessibile come oggetto – Tatarin

+2

Inoltre, sarebbe utile vedere più codice. Ref è accessibile solo all'oggetto a cui si lega. Nella maggior parte dei casi è necessario associarlo a un elemento che non proviene dal binding dell'ambito – Tatarin

risposta

16

La posizione corretta per lavorare con refs si trova all'interno di specifici metodi del ciclo di vita React, ad es. ComponentDidMount, ComponentDidUpdate

Non è possibile fare riferimento a refs dal metodo render(). Read more about the cautions of working with refs here.

Se si sposta il console.log('REFS', this.refs.russian); chiamata a ComponentDidMount o ComponentDidUpdate metodi del ciclo di vita (si assumendo siete su Reagire> = 14) non si dovrebbe ottenere indefinito di conseguenza.

UPDATE: anche arbitri non funziona su componenti senza stato per il link cautela sopra

23

Verificare di non accedere a ref prima che il componente figlio sia stato montato. Per esempio. non funziona in componentWillMount. Un modello diverso, che invoca auto rif richiamata relativo dopo l'elemento è stato montato è this-

elementi

<div ref={(elem)=>(console.log(elem))}/>

È possibile utilizzare questa notazione per ottenere montato nel profondo di nidificazione, come pure -

<div ref={this.props.onMounted}/>