Javascript 如何将JSX呈现（打印）为字符串？

这里JSX是scode示例：

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>
    )
  }
}

导出默认类元素扩展React.Component{
render（）{
返回(
{this.props.langs.map（（lang，i）=>{lang}}
)
}
}

如何得到这样的字符串

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

{this.props.langs.map（（lang，i）=>{lang}}

---

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

只需调用

renderToStaticMarkup（）

，您就可以获得React生成的静态html标记语言

有点像这样：

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

const element = <Element />;

ReactDOMServer.renderToStaticMarkup(element)

从“react dom/server”导入ReactDOMServer；
将元素从“./path/to/Element/class”导入；
常量元素=；
ReactDOMServer.renderToStaticMarkup（元素）

以下是关于这方面的更多文档：

---

什么是上下文？你为什么需要这个，使用什么方法？不清楚。可能会有不同的方法，这取决于您实际想要实现的目标和原因。可能不可能。

中的JS代码在构建

之前就已经被评估过了。这就是你想要的吗？注意：这将为您提供将作为字符串放在页面上的HTML，而不是jsx，但幸运的是，这正是我想要的。谢谢。我试过了，但它增加了很多意想不到的东西。这就是我得到的。它看起来像是添加了其他标签。这太完美了#renderToStaticMarkup（）没有添加额外的属性，但是#renderToString（）显然添加了额外的属性。