Question

我有一个开发要求，我需要在客户端浏览器中呈现React组件，将其生成为html字符串，然后将其发送到后端的puppeteer无头浏览器，puppeteer将html转换为pdf文件，然后将其发送回用于打印或其他目的的前端。因此，我必须提取或收集样式，然后将其与html字符串一起发送。由于某些原因，所有渲染工作都必须在客户端进行。

我注意到样式化组件具有具有服务器渲染功能的api。并且在客户端中也有一些技巧。

const {StyleSheet} = require('styled-components').__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS
StyleSheet.reset(true)

但是它也有警告，不建议在前端使用它，这可能会导致一些幻影问题。

我需要一种解决方案，以在浏览器客户端使用样式将react组件呈现为html。

Answer 1

您可以使用renderToString中的react-dom/server。它将组件渲染为字符串。另外，您可以将样式作为style属性传递给任何html元素，因此样式也将与html标签一起输出到字符串。

例如具有组件

function SomeComponent () {
  return <div style={{ backgroundColor: 'red' }}>Some component with custom styles</div>
}

我们可以做到

let stringRepresentation = renderToString(<SomeComponent/>);

stringRepresentation将包含html代码，因为浏览器会获取它。因此，您可以将此字符串发送到后端。

完整示例为here

客户端渲染使用样式对浏览器客户端中的html进行响应

1 个答案: