CODEWITHSUNDEEP
javascriptreactjs
user2167582
user2167582

Reputation: 6378

is there an React equivalent to Angular(1)'s angular.element

When debugging or adding Feature tests, it is sometimes much easier to highlight the element in ELEMENT view and then use the console to grab the component by the html ELEMENT.

Angular provided this with angular.element($0)

I notice react sprinkles react-id="10.0.0.8.1.0.$=10.0.1" everywhere, now question is can i use the magic here to find the component in console?

with/without using react developer extension.

EDIT: as an example, I am writing E2E tests that need to trigger onmouseenter for a react component, which doesn't seem to work with my version of React and Capybara-webkit (hover and mouseenter doesnt seem to trigger the handler), nor does running any javascript to select the element and trigger the native event ( from my understanding, React.Event#onmouseenter is a synthesized event ). I would rather just trigger it somehow, even with a React.getComponent($0).handleMouseEnter(new Event(....)).

Upvotes: 1

Views: 910

Answers (2)

user9903
user9903

Reputation:

You can use the ReactDOM's findDOMNode method to get the underlying DOM node for your React component.

For debugging it's a good choice, but generally you should follow the advice in the React documentation:

In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

Upvotes: 0

Dan Cantir
Dan Cantir

Reputation: 2955

You should use React Developer Tools for Chrome or React Developer Tools for Firefox.

It's really helpful when developing React Components.

Upvotes: 1

Related Questions