将JSX对象转换为HTML

Question

我有一个react应用程序,它根据某些配置生成HTML输出.像这样:

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

在react应用程序内部,我可以轻松地显示生成的DOM对象,但我想将HTML代码保存到DB,将其显示在不同的页面上(无需再次加载反应/解析配置)

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

Answer 1

使用renderToStaticMarkup方法 - 它生成HTML字符串,我们可以快速传输到线路:

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

Answer 2

redux代码:

这是我必须在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可用
• 需要将ChildComponent包装在一起,Provider以便它可以访问redux存储.