我有一个基于某些配置生成 HTML 输出的 React 应用程序。像这样：
export const getHtml = (config) => {
const {classes, children} = config
return (<div className={classes.join(' ')}>{children}</div>);
}
在 react 应用程序中，我可以轻松显示生成的 DOM 对象，但我想将 HTML 代码保存到 DB，以将其显示在不同的页面上（无需再次加载 react/解析配置）
我找不到将 JSX 对象转换为纯 HTML 的方法...
使用renderToStaticMarkup方法 - 它生成 HTML 字符串，我们可以快速传输到线路：
const htmlString = ReactDOMServer.renderToStaticMarkup(
<div ...
);
还原代码：
这是我必须在我的 react/redux 应用程序中使用的完整代码。
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {Provider} from 'react-redux';
...
class ParentComponent extends React.Component {
...
getHtml(config) {
const {classes, children} = config
return ReactDOMServer.renderToStaticMarkup(
<Provider store={this.context.store}>
<ChildComponent classes={classes}>{children}</ChildComponent>
</Provider>
)
}
}
ParentComponent.contextTypes = { store: React.PropTypes.object };
笔记：
ReactDOMServer.renderToStaticMarkup()获得的HTML代码ParentComponent.contextTypes使 this.context.store 可用Provider以便它可以访问 redux 存储。