如何将 JSX 渲染（打印）为字符串？答案

【问题标题】：How to render (print) JSX as String?如何将 JSX 渲染（打印）为字符串？
【发布时间】：2017-09-11 00:46:37
【问题描述】：

这里 JSX 是代码示例：

export default class Element extends React.Component {
  render() {
    return (
      <div>
        <div className="alert alert-success">
          {this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)}
        </div>
      </div>
    )
  }
}

如何得到这样的字符串？

<div><div className="alert alert-success">{this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)}</div></div>

UPD： 我得到了在服务器上渲染的 React 组件。我想将它们作为字符串转换为客户端的另一个模板库。

【问题讨论】：

上下文是什么？为什么需要这个以及使用什么方法？
不清楚。根据您实际想要实现的目标和原因，可能会有不同的方法。
可能不可能。 <div> 中的 JS 代码甚至在 <div> 构造之前就被评估。
这是您要求的吗？ facebook.github.io/react/docs/…

标签： javascript reactjs jsx

【解决方案1】：

只需调用renderToStaticMarkup()，您应该会得到由 React 生成的静态 html 标记语言。

有点像这样：

import ReactDOMServer from 'react-dom/server';
import Element from './path/to/element/class';

const element = <Element />;

ReactDOMServer.renderToStaticMarkup(element)

【讨论】：

注意：这为您提供了将作为字符串放在页面上的 HTML，而不是 jsx，但幸运的是，这正是我想要的。
谢谢。我试过了，但它增加了很多意想不到的东西。这就是我得到的。
好像是在添加其他标签。
这是完美的。 #renderToStaticMarkup() 不会添加额外的属性，但 #renderToString() 显然会添加。