客户端渲染在具有样式的浏览器客户端中将组件反应到 html

Question

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

我注意到 styled-components 有一个 api 具有服务器渲染能力。而且它在客户端也有一些技巧。

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

但它也有一个警告，不鼓励在前端使用它，并且可能会导致一些鬼问题。

我需要一个解决方案，在浏览器客户端将 react 组件渲染为带有样式的 html。

Answer 1

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

例如有组件

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

我们可以的

let stringRepresentation = renderToString(<SomeComponent/>);

stringRepresentation 将包含浏览器获取的 html 代码。所以你可以把这个字符串发送到后端。

完整的例子是here