如何在ReactJS中输出文本而不将其包装在span中

In my ReactJS-based application I do:

在我的基于ReactJS的应用程序中，我做：

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?

问题是：'some text'包含在DOM中的其他span元素中。有没有办法避免这种行为，只输出原始文本？

To be clear: I want to output

要明确：我想要输出

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

not

不

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

4 个解决方案

#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.

更新：现在在React v15（2016-04-06）中“修复”了 - 现在每个文本周围都添加了注释节点，但它不再包含在标记中。

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.

我们在此版本中收到了社区的一些惊人贡献，我们想特别强调Michael Wiencek提出的拉动请求。感谢Michael的工作，React 15不再在文本周围发出额外的节点，使DOM输出更加清晰。对于React用户来说这是一个长期的烦恼，所以接受这个作为外部贡献是令人兴奋的。

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.

这是目前React的技术限制;它包装了一个span中的任何浮动文本节点，以便它可以为它分配一个ID并在以后再引用它。在React的未来版本中，希望我们可以删除此限制。

#2

You can hard code the html as a last resort.

你可以硬编码html作为最后的手段。

<option value={value} dangerouslySetInnerHTML={{__html: value}}></option>

#3

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不会插入任何spans或react-dataid，而是用于静态服务器呈现。这样做可能不是一个好主意，但你去了。

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.

renderToStaticMarkup类似于renderToString，除了这不会创建额外的DOM属性，例如React在内部使用的data-react-id。如果你想将React用作一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省大量的字节。

Check the result at: http://learnreact.robbestad.com/#/static

检查结果：http：//learnreact.robbestad.com/#/static

#4

I Changed the version of react and react-dom and worked perfect

我改变了反应和反应的版本，并且工作得很完美

"react": "^15.0.1",
"react-dom": "^15.0.1"

#1