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>
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.
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.
You can hard code the html as a last resort.
<option value={value} dangerouslySetInnerHTML={{__html: value}}></option>
<option value={value}>{value}</option> already doesn't add a span.Well.. If you're hell bent on doing this, and accept the limitation that you cannot access props or state, you could do this:
var Component = React.createClass({
displayName:"Statics",
statics: {
customRender: function(foo) {
return React.renderToStaticMarkup(<div
dangerouslySetInnerHTML={{__html: foo.bar }}/>);
}
},
render: function () {
return <div dangerouslySetInnerHTML={{__html:
<Component.customRender bar="<h1>This is rendered
with renderToStaticMarkup</h1>" />}} />
}
});
renderToStaticMarkup will not insert any spans or react-dataid, and is meant for static server rendering. It's probably not a great idea to do this, but there you go.
renderToStaticMarkup Similar to renderToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
Check the result at: http://learnreact.robbestad.com/#/static
<h1>This is rendered without renderToStaticMarkup</h1>, that doesn't make any spans either.I Changed the version of react and react-dom and worked perfect
"react": "^15.0.1",
"react-dom": "^15.0.1"
<span>some text<select>...</select></span>not<span><span>some text</span><select>...</select></span>.<span>prevents?