如何将JSX渲染(打印)为字符串?

本文介绍了如何将JSX渲染(打印)为字符串?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是JSX的代码示例:

Here JSX is scode sample:

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

如何获取这样的字符串?

How to get string like this?

<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组件.我想将它们作为字符串转换为客户端的另一个模板库.

UPD: I got React components which I render on the server. I want to get them as a strings to transform them for another templating library on client side.

推荐答案

只需调用renderToStaticMarkup()，您就应该获得React生成的静态html标记语言.

just call renderToStaticMarkup() and you should get the static html markup language generated by React.

有点像这样:

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

const element = <Element />;

ReactDOMServer.renderToStaticMarkup(element)

这里有一些与此有关的文档:

here are some more docs about this:

https://facebook.github.io/react/docs/react-dom-server.html#rendertostaticmarkup

这篇关于如何将JSX渲染(打印)为字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！