javascript - 如何将 JSX 渲染(打印)为字符串？

Question

这里的 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>
    )
  }
}

如何获取这样的字符串？

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

Answer 1

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

有点像这样:

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

const element = <Element />;

ReactDOMServer.renderToStaticMarkup(element)

这里有一些关于这个的更多文档:

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