Uruchom funkcję dekoracyjną do węzła DOM w reakcji po renderowaniu - javascript, reactjs, materialize

Obecnie używam MaterialiseCSS w moim projekcie. Niektóre komponenty biblioteki wymagają wywoływania niektórych funkcji dekorowania węzła po renderowaniu. Na przykład muszę uciec

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

po <select> węzeł jest renderowany, więc jest dekorowany. Jak jednak to zrobić właściwie reagując? Mój obecny hack to zrobić document.querySelector (poprzez przypisanie unikalnego identyfikatora do komponentu, ponieważ nie reaguje na przechowywanie zrenderowanego odwołania do węzła, chyba że ... używam react-dom?) i uruchamiam inicjowanie w componentDidMount(). Podczas gdy działa, ale po prostu nie wydaje się właściwym sposobem na załatwianie spraw.

Odpowiedzi:

Możesz użyć ref do tego, jak opisano w dokumentacji. Stwierdza, że ​​refs są dobre, gdy trzeba robić imperatywne animacje, które moim zdaniem pasują do twojego przypadku użycia.

Jak wyjaśniają doktorzy, atrybut ref przyjmuje wywołanie zwrotne, a gdy jest używany na elemencie HTML, pierwszym argumentem wywołania zwrotnego jest podstawowy węzeł DOM.

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