Jak uzyskać instancję React z Dom Node

Przed dekadą większość stron internetowych była budowana za pomocą jQuery, jeśli chcemy przetestować lub ominąć niektóre walidacje, mogliśmy bezpośrednio edytować węzeł Dom, ponieważ wszystko było reprezentowane w Dom.

Ale wszystko się zmieniło, jest coraz więcej stron internetowych budowanych z Reactem z wielu powodów, edycja węzła Dom nie ma żadnego wpływu na aplikację. React będzie monitorował wartości stanu każdego komponentu za pomocą Virtual Dom. Gdy stan zostanie zmieniony, React znajdzie najtańszy sposób na aktualizację Dom node.

Jak wiemy, możemy użyć rozszerzenia chrome — React Developer Tools do debugowania aplikacji React, a także możemy zmienić stan komponentu React za pomocą tego narzędzia. Czy istnieje sposób na edycję stanu komponentu React za pomocą zwykłego JavaScript.

W tym artykule omówimy, jak uzyskać instancję React z węzła Dom, której można użyć do uzyskania stanu lub właściwości komponentu React.

Gablota

Jeśli chcemy użyć komponentu ToastExcalidraw do pokazania czegoś, możemy to zrobić jak poniżej:

Jeśli znasz React Developer Tools, możesz edytować stan bezpośrednio za pomocą tego narzędzia:

Pobierz instancję komponentu React z węzła Dom

Kiedy tworzyłem projekty Vue.js, wiedziałem, że możemy pobrać instancję Vue.js z węzła Dom, używając atrybutu __vue_app__:

Jak wiemy, możemy przyjąć, że __reprezentujemy własność prywatną. I próbuję znaleźć, czy projekt Dom of React ma jakąkolwiek własność prywatną:

Tak, wydaje się, że właściwość __reactContainer$xxxxjest zmienną powiązaną z React. Następnie próbuję go wyszukać w kodzie źródłowym React:

Istnieje kilka wewnętrznych kluczy używanych do buforowania instancji komponentu lub rekwizytów.

Instancję komponentu możemy uzyskać za pomocą __reactFiber${randomKey}właściwości Dom node:

W przypadku komponentu klasy bardzo wygodna jest edycja stanu, ale w przypadku komponentu funkcji edycja stanu utworzonego przez hooki nie jest obsługiwana.

Możesz to przetestować na Codepen.io :

Wniosek

W tym artykule dowiemy się, jak uzyskać instancję komponentu React z węzła Dom:

1. Zdobądź klucze węzła Dom przezObject.keys(DomNode)
2. Filtruj klucz zaczyna się od__reactFiber
3. Uzyskaj instancję komponentu React według filtrowanego klucza

Więcej treści na PlainEnglish.io .

Zapisz się do naszego bezpłatnego cotygodniowego biuletynu . Śledź nas na Twitterze , LinkedIn , YouTube i Discordzie .

Buduj świadomość i adopcję swojego startupu technologicznego za pomocą Circuit .