从 React 组件创建 Html，包括样式答案

【问题标题】：Create Html from React Component including Style从 React 组件创建 Html，包括样式
【发布时间】：2019-05-28 14:05:54
【问题描述】：

我有一个简单的反应组件，其中使用 ref 我得到了 div，但我必须生成一个包含样式的 html。所以我可以将此 html 传递给 PDF 生成后端服务器。

pdfRef(elem){
        console.log(elem);
//<div><span>dataPDF</span> </div>

    }

    render() {

        return (
            <div ref={(elem) => this.pdfRef(elem)} className="SomeCssClass">
                <span >dataPDF</span>
            </div>
        );
    }
}

[编辑]

当我尝试通过 ref 打印 div 时，元素会以类名打印。但是当我将此字符串发送到 pdf 服务时，由于只发送了 html 元素和没有实际 css 的类名，因此生成的 pdf 没有样式。

有什么方法可以生成带有 css 作为字符串的 html，以便进一步将其发送到 pdf 服务。希望问题很清楚有什么指点吗？

【问题讨论】：

我不知道你在找什么，你能准确一点吗？

标签： reactjs ref

【解决方案1】：

react-dom 中的 server.js 脚本让您可以将 React 组件渲染为静态 html 字符串。您可以在代码中要求它，例如：

const ReactDOMServer = require('react-dom/server');

或者使用 ES6 语法：

import ReactDomServer from 'react-dom/server'

在此之后，您可以使用 ReactDomServer.renderToString 或 ReactDomServer.renderToStaticMarkup 函数将组件渲染为 HTML 字符串，如下所示：

const htmlStr = ReactDomServer.renderToStaticMarkup(<MyComponent prop1={'value1'} />);

这看起来和ReactDom.render几乎一模一样，除了它不需要dom节点的第二个参数来渲染，而是返回html字符串。此外，此方法可用于客户端和服务器端。对于您的 generate-pdf 用例，renderToStaticMarkup 就足够了。如果需要，请查看以下链接中的文档以了解上述两种方法之间的细微差别：https://reactjs.org/docs/react-dom-server.html

【讨论】：