Как гидратировать реакцию сср с стил-компонентами - PullRequest
Новая
       8

Как гидратировать реакцию сср с стил-компонентами

1 голос
/ 16 февраля 2020

Я строю реактив сср. Я решил использовать styleled-компоненты для css, чтобы попробовать css -in- js. Я получил эту ошибку на консоли: 

react-dom.development.js:530 Warning: Prop `className` did not match. Server: "Home__StyledHome-s26o42-0 frotjg" Client: "Home__StyledHome-s26o42-0 kCdWHN"

Примечание: я вообще не использовал "className".

Я нажал на "response-dom.development. js: 530 "и направлен на эту строку 

Function.prototype.apply.call(console.error, console, argsWithFormat);

это функция рендерера на стороне сервера, где мы визуализируем html: 

import { ServerStyleSheet, StyleSheetManager } from "styled-components";

export default (req, store, context) => {
  const sheet = new ServerStyleSheet();

  try {
    const content = renderToString(
      <Provider store={store}>
        <StaticRouter location={req.path} context={context}>
          <StyleSheetManager sheet={sheet.instance}>
            <div>{renderRoutes(Routes)}</div>
          </StyleSheetManager>
        </StaticRouter>
      </Provider>
    );
    const styleTags = sheet.getStyleTags();
    const helmet = Helmet.renderStatic();
    return `
    <html>
    <head>
    ${helmet.title.toString()}
    ${helmet.meta.toString()}
    ${styleTags}
    </head>
    <body>
    <div  id="root">${content}</div>
    <script>window.INITIAL_STATE=${serialize(store.getState())}</script>
    <script src="bundle.js"> </script>
    </body></html> `;
  } catch (e) {
    console.log(e);
  } finally {
    sheet.seal();
  }
};

это функция гидрата на стороне клиента: 

import { ServerStyleSheet } from "styled-components";
//StyleSheetManager: documentation says do not use in the client side.
const sheet = new ServerStyleSheet();
ReactDOM.hydrate(
    <Provider store={store}>
      <BrowserRouter>
        <div>{renderRoutes(Routes)}</div>
      </BrowserRouter>
    </Provider>,
    document.getElementById("root")
);

, поскольку это не сработало, я реализовал это, но оно не сработало: на стороне сервера: 

export default (req, store, context) => {
  const sheet = new ServerStyleSheet();

  try {
    const content = renderToString(
      sheet.collectStyles(
        <Provider store={store}>
          <StaticRouter location={req.path} context={context}>
            <div>{renderRoutes(Routes)}</div>
          </StaticRouter>
        </Provider>
      )
    );
    const styleTags = sheet.getStyleTags();
    const helmet = Helmet.renderStatic();
    return `
    <html> 
    <head>
    ${helmet.title.toString()}
    ${helmet.meta.toString()}
    ${styleTags}
    </head>
    <body>
    <div  id="root">${content}</div>
    <script>window.INITIAL_STATE=${serialize(store.getState())}</script>
    <script src="bundle.js"> </script>
    </body></html> `;
  } catch (e) {
    console.log("style-component server-site", e);
  } finally {
    sheet.seal();
  }
};

на стороне клиента: 

const sheet = new ServerStyleSheet();
ReactDOM.hydrate(
  sheet.collectStyles(
    <Provider store={store}>
      <BrowserRouter>
        <div>{renderRoutes(Routes)}</div>
      </BrowserRouter>
    </Provider>,
    document.getElementById("root")
  )
);

документация по стилю Компоненты с Reaction-SSR очень короткие. Я реализую способ, которым должен быть API, но все еще получил эту ошибку. эта топи c немного сбивает с толку, надеюсь, кто-то может помочь.

...