Question

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

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

问题是：＆＃39;一些文字＆＃39;包含在DOM中的其他span元素中。有没有办法避免这种行为，只输出原始文本？

要明确：我想输出

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

不

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

Answer 1

更新：现在“已修复” React v15（2016-04-06） - 现在每个文本周围都会添加评论节点，但它是不再包含在<span>代码中。

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

Full release notes.

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

Answer 2

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

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

Answer 3

嗯..如果你一直在努力做到这一点，并接受你无法访问道具或州的限制，你可以这样做：

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

renderToStaticMarkup 与renderToString类似，但这不会创建额外的DOM React在内部使用的属性，如data-react-id。这是如果您想将React用作简单的静态页面生成器，则非常有用剥离额外的属性可以节省大量的字节。

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

Answer 4

我改变了反应和反应的版本，并且完美无缺

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

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

4 个答案: