1

我们目前有一个使用 Intersystems Caché 和 HTML、CSS 和 JS 制作的现有网站。我们正在尝试在这个现有网站中实施反应。

为此，我们使用样式化组件创建了一个反应组件库。我们将这个库导入我们现有的网站。

在我们现有的网站中，我们希望静态渲染我们的 html 文件，其中包含 react 组件。为此，我们使用 webpack 插件：StaticSiteGeneratorPlugin。这部分工作。我们遇到的唯一问题是 Styled Components 的 SSR 不起作用。提取的 css 始终为空。

我们导入组件库并使用其中一个组件的页面模板：

const React = require('react');
const { Button }  = require("component-library"); // Our own created External component library 

const Index = () => {
  return (
      <html>
        <head>
          <title></title>
        </head>

        <body>
          <Button>THIS IS RENDERED BY REACT </Button>
        </body>
      </html>
  )
};

module.exports = Index;

这被渲染成这样：（这部分正在工作，您还可以看到 Styled 组件的类）

<html>
  <head>
    <title></title>
  </head>
  <body>
    <button class="sc-bdnxRM bBXhOB" type="button">
      <span>THIS IS RENDERED BY REACT </span>
    </button>
  </body>
</html>

这是呈现此 HTML 文件的代码：

var React = require("react");
const { StaticRouter, Route } = require('react-router-dom');
const ReactDOMServer = require('react-dom/server');
const { ServerStyleSheet } = require('styled-components');
const paths = require("./paths.js");

const html = (locals) => {
  const sheet = new ServerStyleSheet();
  const html = ReactDOMServer.renderToString(
    sheet.collectStyles(
      <StaticRouter location={locals.path} context={{}}>
        {paths.map((path) => <Route exact path={path.name} key={path.name} component={require("./pages/"+path.component+".jsx")} />)}
      </StaticRouter>
    )
  );
  const css = sheet.getStyleTags()

  console.log('css',css)
  return html
}

export default html;

但是 css 变量始终为空。有人可以帮我解决这个问题吗？

4

0 回答 0