我有一个使用服务器端渲染 (SSR) 来渲染 React 应用程序的快速服务器。
我想将 materialize-css
包与我的 React 应用程序一起使用。
我已将 materialize-css/dist/css/materialize.min.css
和 materialize-css/dist/js/materialize.min
导入到我的应用程序中。 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
中使用 hydrate,
ReactDOM.hydrate(<App />, document.getElementById('root'));.
在这样的设置中使用 materialize-css
的正确方法是什么?
最佳答案
您可以通过使用 CDN 加载脚本来解决此问题,如下所示:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
通过这种方式,脚本被注入(inject)到 window
变量中,因此您可以使用 window.M.AutoInit()
,例如。
因此,在您使用模态框的组件中,在 useEffect 回调中自动初始化它们:
useEffect(() => {
window.M.AutoInit();
}, []);
关于javascript - 在 express/react SSR 应用程序中使用 materialize-css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58949478/
相关文章:
node.js - Npm 包安装在 nvm 的错误 Node 版本文件夹中
php - {YOURLS} 将 "shortening"接口(interface)设为私有(pri
angular - ng5- slider : Dragging pointers not movi
flutter - 调用 notifyListeners() 时对话框状态不更新
node.js - 如何对 express-http-proxy 进行单元测试
python - 当 URL 中没有尾部斜杠时,使用 VueJS 单页的 Django 路由会出现意
r - 如何将 csv 文件导入使用 R 内核的 Google Colab?
amazon-web-services - 无服务器 AWS - 是否值得使用自定义授权方(作为 l