Question

我有一个简单的react组件，其中使用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服务。希望问题清楚有指针吗？

Answer 1

react-dom中的Rails.application.config.assets[:precompile]脚本可让您将React组件呈现为静态html字符串。您可以在代码中要求它，例如：

server.js

或使用ES6语法：

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

此后，您可以使用import ReactDomServer from 'react-dom/server'或ReactDomServer.renderToString函数将组件呈现为HTML字符串，如下所示：

ReactDomServer.renderToStaticMarkup

这看起来几乎与const htmlStr = ReactDomServer.renderToStaticMarkup(<MyComponent prop1={'value1'} />);相似，只是它不需要dom节点的第二个参数来呈现，并且返回了html字符串。此外，此方法可以在客户端和服务器端使用。对于您的generate-pdf用例，ReactDom.render就足够了。如果需要，请检查以下链接中的文档以了解上述两种方法之间的细微差别：https://reactjs.org/docs/react-dom-server.html

从React组件（包括样式）创建HTML

1 个答案: