Question

我们是第一次使用MERN堆栈构建项目。这是一个Stand-up和Retros应用程序。问题是我们的反应组件事件在服务器端不起作用，但在客户端完美运行。基本上我们能够使用React提供静态页面，但不能动态地使用Node和amp;来更新和保存状态。表达我们的服务器。任何帮助修复此块都非常感谢。

我们已使用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并访问localhost：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路由中遗漏了一些内容，但无法将其放在上面。

谢谢！

Answer 1

你的服务器渲染视图就像你说的那样，STATIC--纯标记，只是文本。这就是renderToString的作用。这些页面仍然需要在客户端合并JS以处理事件。

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

Answer 2

感谢您的反馈。我们真的很感激。

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

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

我们省略了一个简单的错误，因为当您使用index.html在客户端使用 React 进行渲染时，您无需在所有内容中添加<script>标记Javascript代码。

因此我们安装了 Webpack 来捆绑使用 Babel 编译的模块，因为我们使用的是最新的 ES6 语法。愿代码之神原谅我们这个错误:)但这是我们第一次使用全新的技术堆栈（如 MERN 以及其他几个中间件）来完成这种复杂的项目strong>和图书馆。

我猜 Rails 完全是自以为是，但 NodeJs + ExpressJs ...让我们说它很有趣：）

自从2天前的初始帖子开始，我们实施了一些技术，如 Websockets ，并添加了 MongoDB 作为我们的数据库，所以现在我们的代码更多复杂。我差点忘了，我们还在 Heroku 上部署了我们的应用程序（我会在2月10日星期五完成链接。

项目结束后，我会发布 Github 回购。这是一个很酷的 Standups和Retros app :)现在我们甚至谈到 Flux 。

这是一个新的架构，它将取代 MVC 传奇，至少在某些情况下以及某些公司如 Facebook ？< / p>

我想我们会看到的！

在NodeJs + Express服务器

2 个答案: