React组件事件无法在NodeJs + Express服务器上工作

-1

我们正在首次使用MERN堆栈构建项目。它是一个站立和回顾应用程序。问题是我们的反应组件事件在服务器端上不起作用，但在客户端完美工作。基本上我们可以使用React服务静态页面，但不能动态更新并保存使用Node作为服务器时的状态。任何帮助解决这个块非常感谢。React组件事件无法在NodeJs + Express服务器上工作

我们已用react-app初始化了我们的项目。我们的package.json看起来是这样的： { "name": "standup", "version": "0.1.0", "private": true, "devDependencies": { "babel-cli": "^6.22.2", "babel-core": "^6.22.1", "ejs": "^2.5.5", "express-react-engine": "^0.6.0", "express-react-views": "^0.10.2", "http-server": "^0.9.0", "mocha": "^3.2.0", "react-router": "^3.0.2", "react-scripts": "0.8.5", "should": "^11.2.0", "supertest": "^3.0.0" }, "dependencies": { "body-parser": "^1.16.0", "express": "^4.14.1", "react": "^15.4.2", "react-addons-test-utils": "^15.4.2", "react-dom": "^15.4.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } 当我们运行npm start参观本地主机：3000，我们得到这个观点这是动态更新： client side rendering screenshot

当我们使用nodemon --exec babel-node --presets 'react,es2015' src/server.js所有按钮的工作打开节点服务器。

网络选项卡中唯一明显的区别是Bundle.js。哪些不在服务器端加载。

This is our Express server: 
import path from 'path'; 
import {Server} from 'http'; 
import Express from 'express' 
import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import HomePage from './components/HomePage' 
import RetroPage from './components/RetroPage' 
import StandupPage from './components/StandupPage' 


const app = new Express(); 
const server = new Server(app); 

app.set('view engine', 'ejs'); 
app.set('views', path.join(__dirname, 'views')); 
console.log(path) 

app.use(Express.static(path.join(__dirname, 'public'))); 

app.get('/', (req, res) => { 
    let markup = renderToString(<HomePage />) 
    res.render('index', {markup}); 
}); 

app.get('/standup', (req, res) => { 
    let markup = renderToString(<StandupPage/>) 
    res.render('index', {markup}) 
}) 

app.get('/retro', (req, res) => { 
    let markup = renderToString(<RetroPage/>) 
    res.send(markup); 
}) 

const port = process.env.PORT || 3000; 
const env = process.env.NODE_ENV || 'production'; 
server.listen(port, err => { 
    if (err) { 
    return console.error(err); 
    } 
    console.info(`Server running on http://localhost:${port} [${env}]`); 
})

我没有在这里显示React组件，因为我们知道它们在客户端工作正常。

我们认为，当我们发送请求时，我们错过了Express路由中的某些内容，但无法将其指向它。

谢谢！

来源

2017-02-01 Tudor Tacal

我不确定我是否按照你所要做的。你想要做服务器端渲染吗？您是否确定要通过react-router从页面到页面移动......我只见过像以下这样的React项目：React为前端和由React项目调用的Node/Express REST API 。 – Turtle

您的服务器呈现的视图就像您说的那样静态 - 纯粹的标记，只是文本。这就是renderToString所做的。这些页面仍然需要在客户端结合JS来处理事件。

另一种解决方法是将所有的事件处理程序中的代码作为匿名函数直接写入到prop中。这是不好的做法。

来源

2017-02-02 04:18:06

谢谢你的反馈球员。我们非常感谢。

我们分析了您的答案并将其考虑在内。

但在我们的教练Mary的帮助下，我们意识到我们并不需要我们的视图模板中的Javascript代码，即服务器端的index.ejs。

，我们省略，因为当你在客户端渲染阵营使用index.html着，你并不需要包括<script>标签与您的所有JavaScript代码的简单的错误。

所以我们安装的WebPack捆绑我们认为是因为我们使用的是最新的ES6语法与巴贝尔编译的模块。愿代码之神原谅我们这个错误:)但这是我们第一次使用全新的技术堆栈，如MERN加上其他几个中间件和库来完成这个复杂项目。

我猜Rails的完全是自以为是，但的NodeJS + ExpressJs ...让我们只说这是一个有趣的:)

加上从最初的帖子，这是3天前，我们实施如Websockets并添加了MongoDB作为我们的数据库，所以现在我们的代码更复杂。我差点忘了，我们还部署在我们的应用程序的Heroku（当它上周五月10日完成，我们需要把链接。

我将张贴Github上回购一旦项目结束，它是一个很酷的Standups和Retros应用程序 :)现在我们甚至谈到Flux。

这是一个新的架构将取代MVC传说，在某些情况下，并在一些公司，如Facebook的至少？

我猜我们会看到！

来源

2017-02-04 01:30:54

React组件事件无法在NodeJs + Express服务器上工作

回答

相关问题