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

【问题标题】：How to output text in ReactJS without wrapping it in span如何在 ReactJS 中输出文本而不将其包装在 span 中
【发布时间】：2014-08-19 14:32:05
【问题描述】：

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

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

问题是：“一些文本”被包裹在 DOM 中的附加 span 元素中。有什么办法可以避免这种行为，只输出原始文本？

明确一点：我想输出

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

不是

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

【问题讨论】：

查看 React 文档。方法“span”旨在创建一个。也许尝试使用 DOM.text() 方法？
否，文本输出。明确一点：我想输出<span>some text<select>...</select></span> 而不是<span><span>some text</span><select>...</select></span>。
不可能。 React 需要能够为每条内容提供唯一的 ID，并且作为另一个元素的兄弟的文本是不可寻址的，因为 Text nodes 没有属性。
<span> 会阻止您做什么？
@ssorallen 将其作为答案 :-)

标签： javascript reactjs

【解决方案1】：

更新：这已在 React v15 (2016-04-06) 中“修复”——现在在每段文本周围添加了注释节点，但它是不再包含在 <span> 标记中。

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

Full release notes.

这是目前 React 的技术限制；它将任何浮动文本节点包装在一个跨度中，以便它可以为其分配一个 ID 并稍后再引用它。希望在未来的 React 版本中我们可以移除这个限制。

【讨论】：

另见#1236，这是一个相关问题。
有志者事竟成。无法在评论字段中插入代码，所以在下面添加了一个。
@Kokodoko 然后明确地在它们周围添加一个跨度。

【解决方案2】：

我更改了 react 和 react-dom 的版本并且运行良好

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

【讨论】：

是的，React >= 15 不再创建这些 span。

【解决方案3】：

您可以对 html 进行硬编码作为最后的手段。

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

【讨论】：

<option value={value}>{value}</option> 已经没有添加跨度。

【解决方案4】：

好吧.. 如果你下定决心要这样做，并接受不能访问 props 或 state 的限制，你可以这样做：

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

【讨论】：

如果你只是渲染<h1>This is rendered without renderToStaticMarkup</h1>，那也不会产生任何跨度。