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

如何将JSX渲染（打印）为String？

1 个答案: