当NodeJS将React呈现为视图引擎时使用React Coverflow
提问于 2021-01-09 23:22:55
我真的很感谢你的帮助(：我的网站就是基于这个概念建立的：https://github.com/saltyshiomix/react-ssr-jsx-starter
使用axios、reactstrap等非常好用。但是当我想使用React Coverflow时：https://andyyou.github.io/react-coverflow/
我得到了这个错误：
ReferenceError: window is not defined
at Object.<anonymous> (C:\Users\MB\react_project\react-ssr-jsx-starter-master\node_modules\react-coverflow\dist\react-coverflow.js:1:266)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module._compile (C:\Users\MB\react_project\react-ssr-jsx-starter-master\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.newLoader [as .js] (C:\Users\MB\react_project\react-ssr-jsx-starter-master\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\MB\react_project\react-ssr-jsx-starter-master\node_modules\react-coverflow\main.js:1:18)代码在没有它的情况下也能正常工作。
错误时刻的overflow.jsx：
import React from 'react';
import ReactDOM from 'react-dom';
import Coverflow from 'react-coverflow';
class Overflow extends React.Component {
constructor(props) {
super(props);
this.state = {
active: 0
};
}
render() {
return (
<div>
<h1>Temporary</h1>
</div>)
}
}
export default Overflow;相关NodeJS代码：( index.js拼接成server.js)
var index = require('./Controller/index.js');
const express = require('express');
const register = require('@react-ssr/express/register');
const app = express();
app.use(express.static('./public/assets'));
(async () => {
await register(app);
app.get('/test_1', (req, res) => {
const user = { name: 'World', age: 19 }; //for testing reasons
res.render('overflow', {user});
});
app.listen(3000, () => {
console.log('> Ready on http://localhost:3000');
});
})();
回答 1
Stack Overflow用户
发布于 2021-01-10 13:06:36
我使用JSDOM修复了这个问题。
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
---
app.get('/test_1', (req, res) => {
const user = { name: 'World', age: 19 };
global.window = {document: {createElementNS: () => {return {}} }};
global.document = new JSDOM().window.document;
const window = new JSDOM();
res.render('overflow', {user});
delete global.window;
});这确实解决了这个问题(因为它创建了窗口和文档，并且在某种程度上改变了“服务器端”的概念)。但请注意，服务器现在运行速度非常慢，因为它正在努力创建文档和窗口……
当然，任何进一步的建议都是受欢迎的。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65648633
复制相关文章
腾讯云开发者
