Dom Düğümünden React Örneği Nasıl Alınır?

On yıldan önce, web sitelerinin çoğu jQuery ile oluşturuldu, bazı doğrulamaları test etmek veya atlamak istiyorsak, Dom'da temsil edilen her şey için Dom düğümünü doğrudan düzenleyebilirdik.

Ancak işler değişti, birçok nedenden dolayı React ile daha fazla web sitesi oluşturuluyor, Dom düğümünü düzenlemenin uygulamaya herhangi bir etkisi olmuyor. React, Virtual Dom ile her bileşenin durumunun değerlerini izleyecektir. Durum değiştirildiğinde React, Dom düğümünü güncellemenin en ucuz yolunu bulacaktır.

Bildiğimiz gibi, React uygulamasında hata ayıklamak için chrome uzantısını — React Developer Tools kullanabiliriz ve araçla React bileşeninin durumunu değiştirebiliriz. Düz Javascript aracılığıyla React bileşeninin durumunu düzenlemenin bir yolu olup olmadığı.

Bu yazıda, React bileşeninin durumunu veya özelliklerini almak için kullanılabilecek Dom düğümünden React örneğini nasıl alacağımızı tartışacağız.

Vitrin

Bir şeyi göstermek için Excalidraw bileşenini kullanmak istiyorsak Toast, bunu aşağıdaki gibi yapabiliriz:

React Developer Tools'a aşina iseniz, durumu doğrudan bu araçla düzenleyebilirsiniz:

React bileşen örneğini Dom düğümünden alın

Vue.js projelerini geliştirirken, şu özelliği kullanarak Vue.js örneğini Dom düğümünden alabileceğimizi biliyordum __vue_app__:

__Bildiğimiz gibi, özel mülkiyeti temsil etmek için alabiliriz . Ve Dom of React'in projesinin herhangi bir özel mülkü olup olmadığını bulmaya çalışıyorum:

Evet, özellik __reactContainer$xxxxReact ile ilgili bir değişken gibi görünüyor. Sonra React kaynak kodunda aramaya çalışıyorum:

Bileşen örneğini veya donanımını önbelleğe almak için kullanılan bazı dahili anahtarlar vardır.

__reactFiber${randomKey}Bileşen örneğini Dom düğümünün özelliği aracılığıyla alabiliriz :

Sınıf bileşeni için durumu düzenlemek çok uygundur, ancak işlev bileşeni için kancalar tarafından oluşturulan durumu düzenlemeyi desteklemez.

Bunu Codepen.io'da test edebilirsiniz :

Çözüm

Bu yazıda, Dom düğümünden React bileşen örneğini nasıl alacağımızı öğreniyoruz:

1. Dom düğümü anahtarlarını şu şekilde alın:Object.keys(DomNode)
2. Anahtarı filtrele şununla başlar:__reactFiber
3. React bileşen örneğini filtrelenmiş anahtarla alın

PlainEnglish.io'da daha fazla içerik .

Haftalık ücretsiz bültenimize kaydolun . Bizi Twitter , LinkedIn , YouTube ve Discord'da takip edin .

Circuit ile teknoloji girişiminiz için farkındalık ve benimseme oluşturun .