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

还原代码：

以下是我必须在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商店。

将JSX对象转换为HTML

2 个答案: