Come ottenere l'istanza di React da Dom Node

Prima degli anni del decennio, la maggior parte dei siti web erano costruiti con jQuery, se vogliamo testare o bypassare alcune convalide, potevamo modificare direttamente il nodo Dom per tutto ciò che era rappresentato nel Dom.

Ma le cose sono cambiate, ci sono sempre più siti web costruiti con React per molte ragioni, modificare il nodo Dom non ha alcun effetto sull'applicazione. React monitorerà i valori dello stato di ciascun componente con Virtual Dom. Quando lo stato viene modificato, React troverà il modo meno costoso per aggiornare il nodo Dom.

Come sappiamo, possiamo utilizzare l'estensione di Chrome - React Developer Tools per eseguire il debug dell'applicazione React e possiamo modificare lo stato del componente React tramite lo strumento. Se esiste un modo per modificare lo stato del componente React tramite un semplice Javascript.

In questo articolo, discuteremo come ottenere un'istanza di React dal nodo Dom che può essere utilizzata per ottenere lo stato o gli oggetti di scena del componente React.

Vetrina

Se vogliamo utilizzare il componente Toastdi Excalidraw per mostrare qualcosa, possiamo farlo come di seguito:

Se hai familiarità con gli strumenti per sviluppatori React, puoi modificare lo stato direttamente da questo strumento:

Ottieni l'istanza del componente React dal nodo Dom

Quando ho sviluppato i progetti Vue.js, sapevo che potevamo ottenere l'istanza Vue.js dal nodo Dom utilizzando l' __vue_app__attributo:

Come sappiamo, possiamo assumere il __per rappresentare la proprietà privata. E cerco di scoprire se il progetto di Dom of React ha una proprietà privata:

Sì, la proprietà __reactContainer$xxxxsembra essere una variabile correlata a React. Quindi provo a cercarlo nel codice sorgente di React:

Esistono alcune chiavi interne utilizzate per memorizzare nella cache l'istanza o gli oggetti di scena del componente.

Possiamo ottenere l'istanza del componente tramite la __reactFiber${randomKey}proprietà del nodo Dom:

Per il componente classe, è molto comodo modificare lo stato, ma per il componente funzione non è supportato modificare lo stato creato dagli hook.

Puoi testarlo su Codepen.io :

Conclusione

In questo articolo, impariamo come ottenere l'istanza del componente React dal nodo Dom:

1. Procurati le chiavi del nodo DomObject.keys(DomNode)
2. Filtrare la chiave inizia con__reactFiber
3. Ottieni l'istanza del componente React dalla chiave filtrata

Altri contenuti su PlainEnglish.io .

Iscriviti alla nostra newsletter settimanale gratuita . Seguici su Twitter , LinkedIn , YouTube e Discord .

Crea consapevolezza e adozione per la tua startup tecnologica con Circuit .