Esegui la funzione decorativa sul nodo DOM in risposta dopo il rendering: javascript, reactjs, materialize

Attualmente sto usando MaterializeCSS nel mio progetto. Alcuni componenti della libreria richiedono la chiamata di alcune funzioni per decorare un nodo dopo il rendering. Ad esempio, devo correre

var instance = M.FormSelect.init(elem, options);

dopo il <select> il nodo è reso in modo che sia decorato. Tuttavia, come posso farlo correttamente nel reagire? Il mio trucco attuale è fare un document.querySelector (assegnando un ID univoco al componente perché reazioni non memorizza il riferimento al nodo renderizzato, a meno che ... io non utilizzi reagente-dom?) ed esegua l'inizializzazione in componentDidMount(). Mentre funziona, ma non sembra proprio il modo corretto di fare le cose.

risposte:

Puoi usare refs per questo, come descritto nella documentazione. Afferma che i ref sono utili quando devi realizzare animazioni imperative, cosa che credo sia adatta al tuo caso d'uso.

Come spiegano i documenti, l'attributo ref accetta un callback e quando usato su un elemento html, il primo argomento del callback è il nodo DOM sottostante.

<div ref={(node) => { /* perform imperative operations */ }}></div>