banner 728x90

Get a React Component by DOM Node

In Mobile Web Development 11 views
banner 728x90

Fetching a DOM node from a React component is quite simple from the part itself, but what if you want to work backwards: do you restore a instance of a component by a DOM node? This is a task that allows the Dijit framework of the old Dojo Toolkit with the dojo.byId method, so it made me think whether you could do the same with React. It turns out that you can retrieve a component instance at DOM node!

The following function allows you to obtain an instance of a React component on a DOM node:

function findReactElement (node) 

If the node is a component file of React, you will see a lot of amazing information, such as the props, state, context, refs, list of methods and more:

 React Element State

Modifying props / state and calling display methods do not seem to do anything, so manipulation does not seem possible from the outside, but it is useful to get the component instance based on the DOM node if there is nothing other than inspection. Nice!


  •  Page visibility API

    Page visibility API

    One event that has always been missing within the document is a signal for when the user looks at a particular tab or to another tab. When does the user switch off our site to look at something else? When will they return?

  •  7 Essential JavaScript functions

    7 Essential JavaScript functions

    I remember the start time of JavaScript where almost everything needed a simple function because the browser providers implemented functions differently, and not just peripherals, basic functions such as addEventListener and attachEvent . Times have changed, but there are still a few functions that every developer should …

  •  ] CSS Fixed Positioning

    CSS Fixed placement

    If you want to keep an element at the same location in the viewport, regardless of where on the page the user is located, the function for fixed positioning of CSS what you need.

    The CSS

    Above we set our element 2% of both the top and the right side of the …

  •  Create a Dojo-Powered WordPress Website View

<! –

->

banner 728x90
author
Author: 
    Build a user settings store with AWS AppSync
    Build a user settings store with AWS AppSync
    Amazon Cognito Sync is a service that
    Synchronize user settings for Android with AWS AppSync
    Synchronize user settings for Android with AWS AppSync
    Amazon Cognito Sync is a service that
    Script & Style Show: Episode 10: Dojo
    Script & Style Show: Episode 10: Dojo
    In this episode welcome David and Todd

    Leave a reply "Get a React Component by DOM Node"

    Must read×

    Top