Question

I'm just starting to play with React, and am trying to re-create existing HTML output using React Components.

I'm not sure if this is a bug, or I'm doing something wrong, but the final HTML output is not what I'm expecting.

The issue is that the tab anchor text should not be wrapped in a span, only the following number.

Starting with this JSX:

/** @jsx React.DOM */;
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <div>
          <ul>
            <li><a>Tab1 <span>3</span></a></li>
            <li><a>Tab2 <span>9</span></a></li>
            <li><a>Tab3 <span>5</span></a></li>
            <li><a>Tab4 <span>6</span></a></li>
          </ul>
        </div>
      </div>
    );
  }
});
React.renderComponent(MyComponent({}), document.body);

Which compiles into the following JS:

/** @jsx React.DOM */;
var MyComponent = React.createClass({displayName: 'MyComponent',
  render: function() {  
    return (
      React.DOM.div(null, 
        React.DOM.div(null, 
          React.DOM.ul(null, 
            React.DOM.li(null, React.DOM.a(null, "Tab1 ", React.DOM.span(null, "3"))),
            React.DOM.li(null, React.DOM.a(null, "Tab2 ", React.DOM.span(null, "9"))),
            React.DOM.li(null, React.DOM.a(null, "Tab3 ", React.DOM.span(null, "5"))),
            React.DOM.li(null, React.DOM.a(null, "Tab4 ", React.DOM.span(null, "6")))
          )
        )
      )
    );
  }
});
React.renderComponent(MyComponent({}), document.body);

Which then renders as the following HTML:

<div data-reactid=".r[1ajsn]">
  <div data-reactid=".r[1ajsn].[0]">
    <ul data-reactid=".r[1ajsn].[0].[0]">
      <li data-reactid=".r[1ajsn].[0].[0].[0]">
        <a data-reactid=".r[1ajsn].[0].[0].[0].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[0].[0].[0]">Tab1 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[0].[0].[1]">3</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[1]">
        <a data-reactid=".r[1ajsn].[0].[0].[1].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[1].[0].[0]">Tab2 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[1].[0].[1]">9</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[2]">
        <a data-reactid=".r[1ajsn].[0].[0].[2].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[2].[0].[0]">Tab3 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[2].[0].[1]">5</span>
        </a>
      </li>
      <li data-reactid=".r[1ajsn].[0].[0].[3]">
        <a data-reactid=".r[1ajsn].[0].[0].[3].[0]">
          <span data-reactid=".r[1ajsn].[0].[0].[3].[0].[0]">Tab4 </span>
          <span data-reactid=".r[1ajsn].[0].[0].[3].[0].[1]">6</span>
        </a>
      </li>
    </ul>
  </div>
</div>

The javascript clearly shows the span as a child of the anchor, so I'm thinking it's probably a bug, but wanted to make sure I'm not doing something wrong.

Was it helpful?

Solution

Yes, this is currently a limitation in React; in order for it to do live updates it needs to give each text node an ID by wrapping it in a span.

I'm hoping to get rid of this problem sometime in the future.

OTHER TIPS

You can always use className to identify specific elements. It seems the numbers are badges of some sort, so each span could have className="badge"

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top