将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的方法...

- Philipp

Answer 1

使用renderToStaticMarkup方法。根据文档：

您可以使用此方法在服务器端生成HTML并在初始请求上发送标记，以加快页面加载速度并允许搜索引擎爬取您的页面以进行SEO优化。

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

- Igorsvee

---

img 标签不渲染 onError，有什么解决办法吗？ - Darmawan Z.

非常感谢ReactDOMServer.renderToStaticMarkup方法，这正是我在寻找的！ - Elisey

JS和hooks无法在静态标记中工作。 - Ankit

JS和hooks在静态标记中不起作用。 - undefined

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存储库。

- Philipp

---

你会如何使用MobX实现它？ - Adam Beleko

@Philipp 有没有一种交互式标记语言，可以通过 renderToString 触发操作的方法？ - Ashwin Kumar