javascript - How to output text in ReactJS without wrapping it in span

Question

In my ReactJS-based application I do:

var _ = React.DOM;
_.span(null, 'some text', _.select(null, ...));

The problem is: 'some text' is wrapped in additional span element in the DOM. Is there any way to avoid this behavior and just output raw text?

To be clear: I want to output

<span>some text<select>...</select></span>

not

<span><span>some text</span><select>...</select></span>

Answer 1

Update: This is now "fixed" in React v15 (2016-04-06) – now comment nodes are added around each piece of text, but it is no longer wrapped in a <span> tag.

We received some amazing contributions from the community in this release, and we would like to highlight this pull request by Michael Wiencek in particular. Thanks to Michael’s work, React 15 no longer emits extra <span> nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.

Full release notes.

---

This is currently a technical limitation of React; it wraps any floating text nodes in a span so that it can assign it an ID and refer back to it later. In a future version of React hopefully we can remove this restriction.