在 express/react SSR 应用程序中使用 materialize-css

Question

我有一个使用服务器端渲染 (SSR) 来渲染 React 应用程序的快速服务器。

我想将 materialize-css 包与我的 React 应用程序一起使用。

我已将 materialize-css/dist/css/materialize.min.css 和 materialize-css/dist/js/materialize.min 导入我的 App.js。

在我使用 express 渲染我的应用程序服务器端之前，它工作正常，正确加载了来自 materialize 的样式和模态。

现在，当我尝试使用 express 呈现我的应用程序时，出现以下错误：

[0] ReferenceError: window is not defined
[0]     at Object.<anonymous> (/Users/user/Sites/task_keeper/node_modules/materialize-css/dist/js/materialize.min.js:6:1135)
[0]     at Module._compile (internal/modules/cjs/loader.js:778:30)
[0]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
[0]     at Module.load (internal/modules/cjs/loader.js:653:32)
[0]     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
[0]     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
[0]     at Module.require (internal/modules/cjs/loader.js:692:17)
[0]     at require (internal/modules/cjs/helpers.js:25:18)
[0]     at eval (webpack:///external_%22materialize-css/dist/js/materialize.min%22?:1:18)

这是我的渲染中间件：

const renderMiddleware = () => (req, res) => {
  let html = req.html;
  const htmlContent = ReactDOMServer.renderToString(<App />);
  const htmlReplacements = {
    HTML_CONTENT: htmlContent,
  };

  Object.keys(htmlReplacements).forEach(key => {
    const value = htmlReplacements[key];
    html = html.replace(
      new RegExp('__' + escapeStringRegexp(key) + '__', 'g'),
      value
    );
  });

  res.send(html);
};

然后我在 index.js、

中使用水合物

ReactDOM.hydrate(<App />, document.getElementById('root'));.

在这样的设置中使用 materialize-css 的正确方法是什么？

Answer 1

您可以通过使用 CDN 加载脚本来解决此问题，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

这样脚本被注入到 window 变量中，因此您可以使用 window.M.AutoInit()，例如。

因此，在您使用模态框的组件中，在 useEffect 回调中自动初始化它们：

useEffect(() => {
  window.M.AutoInit();
}, []);

在 express/react SSR 应用程序中使用 materialize-css

Using materialize-css in express/react SSR app

javascript

materialize

express

reactjs

server-side-rendering