1

Intersystems Caché と HTML、CSS、および JS で作成された既存の Web サイトがあります。現在、この既存の Web サイトに反応を実装しようとしています。

このために、スタイル付きコンポーネントを使用して反応コンポーネント ライブラリを作成しました。このライブラリを既存の Web サイトにインポートします。

既存の Web サイトで、react コンポーネントを含む html ファイルを静的にレンダリングしたいと考えています。このために、webpack プラグイン StaticSiteGeneratorPlugin を使用します。この部品は動作します。私たちが抱えている唯一の問題は、スタイル付きコンポーネントの SSR が機能していないことです。抽出された css は常に空です。

コンポーネント ライブラリをインポートしてコンポーネントの 1 つを使用するページ テンプレート:

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