React 在渲染之前更改 html，例如更改样式、添加跨度标签等

【问题标题】：React changes the html before rendering like changing the styles, adding span tags etcReact 在渲染之前更改 html，例如更改样式、添加跨度标签等
【发布时间】：2014-10-15 00:59:14
【问题描述】：

我正在使用 qunit 测试我的 react 组件，我的第一个测试用例是将 html react 给出的结果与我的预期进行比较。我正在使用 React.renderComponentToString 方法来检索正在呈现的 html。但是我注意到，react 附加了它自己的类和样式。所以要删除我使用的正则表达式

var stripReactAttrs = / data-react[-\w]+="[^"]+"/g;

这样我可以获得原始/预期的 html，但它也执行其他操作，例如将空格转换为跨度标记，删除关闭的输入标记。有人可以确认一下 ReactJS 是做什么的，以便我可以相应地准备我预期的 html 并测试我的组件吗？

【问题讨论】：

标签： javascript reactjs qunit

【解决方案1】：

您在这里寻找的实际上是React.renderComponentToStaticMarkup 函数。它会输出没有特殊数据反应标签等的html。

http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup

值得注意的是，某些东西被包裹在原始 JSX 中可能不存在的元素中（如果您使用的是 JSX）。

例如，react 将包装某些文本以更正您的 html。

例子：

<div>
    Hello
    <div>World</div>
</div>

将呈现为：

<div>
    <span>Hello</span>
    <div>World</div>
</div>

【讨论】：