Miles Johnson Miles Johnson - 1 year ago 380
React JSX Question

Get HTML tag name from React element?

Is it possible to get an HTML tag name from a React element (return from a component)? For example:

function Foo() {
return <span>Hello</span>;

The HTML tag name would be
. I know you can look into the
property of the React element, but it gets really difficult between SFC and normal components, and even harder when the component depth is rather large. For example:

function Bar() {
return <Foo />;

Should still return

Answer Source


React Elements are a virtual construct, and they don't directly represent DOM elements. There are two types of React Elements - "regular" HTML DOM elements, and instantiations of a React Class. The first one has a "type" because it is extremely simple, stateless, and immutable, and is created only to render its corresponding DOM element (but don't confuse it with the DOM element itself!) An example of this would be <div>Foo</div> in JSX or React.createElement("div", null, "Foo") in JS.

However instantiations of a React Class don't have a "type" because they don't represent a typical DOM element. When we instantiate a React Class we call it a "Component" to identify it as a single instance of the Class, having a render method, encapsulated state, etc. It's impossible to retrieve the "type" of a Component because the actual DOM elements that it will render are completely dependent on its internal state and what the render method decides to return. An example of this would be a React Class defined somewhere and then instantiated with <Foo /> or React.createElement(Foo).

The only way to know what DOM elements a Component is actually rendering is to, well, mount and render it and see what it does. There is no "type" inherent to the component itself. You could conceivably mount a Component, use ref to capture the DOM element as it's rendered, and then use a callback function to pass this information back to parent(s).

var Child = React.createClass({
  render: function() {
    return <div ref={function(el){this.props.whatElementAmI(el)}.bind(this)} >Oh My!</div>

var Parent = React.createClass({
  whatElementAmI: function(el) {
    console.log(el.nodeName); // "DIV"
  render: function() {
    return <div><Child whatElementAmI={this.whatElementAmI.bind(this)} /></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download