javascript - 将 React JSX 对象转换为 HTML

Question

我有一个基于某些配置生成 HTML 输出的 React 应用程序。像这样:

export const getHtml = (config) => {
  const {classes, children} = config
  return (<div className={classes.join(' ')}>{children}</div>);
}

在 React 应用程序中，我可以轻松地显示生成的 DOM 对象，但我想将 HTML 代码保存到数据库中，以便在不同的页面上显示它(无需再次加载 react /解析配置)

我找不到将 JSX 对象转换为纯 HTML 的方法...

Answer 1

使用 renderToStaticMarkup方法。根据文档:

You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

const htmlString = ReactDOMServer.renderToStaticMarkup(
    <div>
        ...
    </div>
);