Como obter a instância React do nó Dom

Antes da década, a maioria dos sites era construída com jQuery, se quisermos testar ou ignorar algumas validações, poderíamos editar o nó Dom diretamente para que tudo fosse representado no Dom.

Mas as coisas mudaram, há cada vez mais sites construídos com React por vários motivos, editar o nó Dom não tem nenhum efeito no aplicativo. O React monitorará os valores do estado de cada componente com o Virtual Dom. Quando o estado é alterado, o React encontrará uma maneira menos dispendiosa de atualizar o nó Dom.

Como sabemos, podemos usar a extensão chrome — React Developer Tools para depurar o aplicativo React e podemos alterar o estado do componente React pela ferramenta. Se existe uma maneira de editar o estado do componente React via Javascript simples.

Neste artigo, discutiremos como obter a instância React do nó Dom que pode ser usada para obter o estado ou props do componente React.

Mostruário

Se quisermos usar o componente Toastdo Excalidraw para mostrar algo, podemos fazer como abaixo:

Se você estiver familiarizado com as ferramentas do desenvolvedor do React, poderá editar o estado diretamente por esta ferramenta:

Obtenha a instância do componente React do nó Dom

Quando desenvolvi projetos Vue.js, sabia que podemos obter a instância Vue.js do nó Dom usando o __vue_app__atributo:

Como sabemos, podemos tomar o __para representar a propriedade privada. E tento descobrir se o projeto do Dom of React tem alguma propriedade privada:

Sim, a propriedade __reactContainer$xxxxparece ser uma variável relacionada ao React. Então eu tento procurá-lo no código-fonte do React:

Existem algumas chaves internas usadas para armazenar em cache a instância ou props do componente.

Podemos obter a instância do componente por meio da __reactFiber${randomKey}propriedade do nó Dom:

Para componente de classe, é muito conveniente editar o estado, mas para componente de função, não há suporte para editar o estado criado por ganchos.

Você pode testar isso no Codepen.io :

Conclusão

Neste artigo, aprendemos como obter a instância do componente React do nó Dom:

1. Obtenha as chaves do nó Dom porObject.keys(DomNode)
2. Filtrar a chave startsWith__reactFiber
3. Obtenha a instância do componente React pela chave filtrada

Mais conteúdo em PlainEnglish.io .

Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter , LinkedIn , YouTube e Discord .

Conscientize e adote sua startup de tecnologia com o Circuit .