Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当NodeJS将React呈现为视图引擎时使用React Coverflow

当NodeJS将React呈现为视图引擎时使用React Coverflow
EN

Stack Overflow用户
提问于 2021-01-09 23:22:55
回答 1查看 73关注 0票数 1

我真的很感谢你的帮助(:我的网站就是基于这个概念建立的:https://github.com/saltyshiomix/react-ssr-jsx-starter

使用axios、reactstrap等非常好用。但是当我想使用React Coverflow时:https://andyyou.github.io/react-coverflow/

我得到了这个错误:

代码语言:javascript
运行
AI代码解释
复制
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:

代码语言:javascript
运行
AI代码解释
复制
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)

代码语言:javascript
运行
AI代码解释
复制
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');
  });
})();
EN

回答 1

Stack Overflow用户

发布于 2021-01-10 13:06:36

我使用JSDOM修复了这个问题。

代码语言:javascript
运行
AI代码解释
复制
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;
});

这确实解决了这个问题(因为它创建了窗口和文档,并且在某种程度上改变了“服务器端”的概念)。但请注意,服务器现在运行速度非常慢,因为它正在努力创建文档和窗口……

当然,任何进一步的建议都是受欢迎的。:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65648633

复制
相关文章

相似问题

添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档