个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
部署react应用程序的通常过程很简单，使用webpack处理代码转换，最终结果是一个.js包含所有 css/js/html 的应用程序。但是我有一个应用程序需要来自客户端请求的一些数据来表达服务器。
例如，我想从请求中获取一个 userid，并基于此向 App 组件提供一些数据，然后提供一个 .js 包含应用程序和用户特定数据的文件(就像 webpack 提供的一样)。
我试过，给用户 babel-core/register 和 react-dom/server.renderToString，但它只是提供给 html 和 css 而不是使应用运行所需的 js 代码。我必须单独加载这些代码!
最佳答案
这是一个很常见的问题。最好以与您尝试的方式稍有不同的方式解决它(您不想强制您的用户等待 ~10 秒来为他构建 bundle )
userid <script src为您的用户捆绑 js。源路径应该由服务器动态构建以指向精确的 js 包(如果有多个)。它还应该有 javascript 全局对象，其中包含来自服务器的参数，您的组件应该可以看到这些参数。例如 index.html 可能看起来像(你可以做不同的事情，也许不创建全局对象。我希望你对这个想法有一般的了解)。 :<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
__CONFIG__ = {
someObject1: '<!-- @echo someObject1 -->',
someObject2: '<!-- @echo someObject2 -->',
userid: '<!-- @echo userid -->',
}
</script>
<script src="<!-- @echo SOME_PATH -->/static/bundle.js"></script>
</body>
</html>
现在您的组件可以检查全局变量 CONFIG 。但我建议不要在你的普通组件中使用它!创建 Bootstrap 组件来加载您的普通 React 应用程序，它就像您的应用程序和环境之间的桥梁。读取此 Bootstrap 组件中的全局配置，然后将其作为 Prop 传递给您的应用程序。
这个 Bootstrap 组件可能看起来像:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
const config = window.__CONFIG__;
ReactDOM.render(
<App
config={config}
/>, document.getElementById('root'));
编辑:如果您必须根据数据库设置初始状态或告诉 react 做某事，这也是一个好方法。为此，我添加了额外的全局变量 __INIT__
关于javascript - 在 expressjs 上动态转换和服务 React 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37251857/
25
4
0
基于此答案的问题:https://stackoverflow.com/a/18650183/4478897 我试图找到这个解决方案，但似乎没有任何效果符合我的需要。 集群 expressjs 和 so
我有一个使用 Sequelize.js 作为 ORM 运行的快速应用程序。我的 express 应用程序从我的主要 Rails 应用程序接收请求，并且由于跨域策略，这些请求是使用 getJSON 执行
如何处理同步错误并保证在同一代码中出现错误？ 这是我的代码，但不确定其工作正常，有什么想法吗？ helpers.list({ limit: 1 })
在我的 ExpressJS 代码中，我限制主体大小如下: app.use(bodyParser.urlencoded({ limit : "512kb", extended: fals
我有一个看起来像这样的对象: editinvite: { _id: '', title: '', codes_list: [] } 问题是我无法在 NodeJS 应用程序中访问codes_
我正在尝试让我的nodeapp 使用express 工作。 我已经通过 nginx 设置了反向代理以使用 https://dank.ml/api/v1但每当我启动我的应用程序时，它都不想检测 / 响应
我完全失去了理智: 我有一个快速应用程序:以下是此示例的几个文件的快照: 应用程序.js -模型 --Event.js --Match.js 路线 --matches.js app.js: globa
我有我的nodejs项目，我想将记录器与我的route.js分开以获得干净的代码。 但是我遇到了下一个问题，当我尝试将记录器加载到route.js 文件时，它会显示下一个错误: TypeError:
我在 MEAN 应用程序中的模板缓存方面遇到一些困难。我有一个导航栏，它使用条件逻辑来显示/隐藏向用户显示的按钮。当用户点击页面时，这些值将被设置为 null 或 false，但是一旦他们登录，这些值
是否可以根据可选路线创建不同的查询？ app.get('/:genre/:book?', function (req, res) { var genre = req.params.genre; v
我正在尝试学习 ExpressJS，并且遇到了这段代码。我似乎无法理解 app.use 函数，并且文档对我来说也不清楚。当调用 app.use 时，此特定示例代码中的/public 目录到底发生了什么
我正在开发一个学校管理系统。当老师发送发布请求时，我在后端创建一个路由内的全局对象。所以当多个老师访问服务器时，会创建多个全局对象......或者每个老师访问同一个对象？(会被重写同一个对象吗？) 最
我有一个用 typescript 编写的小型微服务，在 AKS 上的 kubernetes 集群中运行。我使用 Helm 生成了入口 apiVersion: extensions/v1beta1 ki
我需要将 JSON 发送到我的服务器，但 POST 请求显示为空正文。这是我在前端的 typescript : function sendData() : void { console.log("Se
这是我的 app.js import path from 'path'; import bodyParser from 'body-parser'; import express from 'expr
我一直在使用 ExpressJS 来促进文件上传，但据我所知，您可以将文件上传到任何路由，无论它是否处理它。 说我有 app.post('/photos/upload', photos.upload)
我正在阅读 Express.JS 4.x API，并且很好奇他们是如何设置的。这是我对正在发生的事情的理解:在 Express.JS 4.x API 的示例代码中，express 模块被导入并分配给变
我有以下注册页面 form(method='post', action='users/register') .form-group label Name inp
我有诸如 :id/comments/、:id/otherRoute 等路线。对于这些路线，我需要创建新的 Controller 。例如: let id: number = +req.params["i
嘿，我有一个使用 Express.js 和 Handlebars 运行的网站，该网站的导航栏和侧边栏在所有页面上都保持相同。当我路由时，它仅更改页面容器 {{{body}}}。 有没有一种方法可以让我
我是一名优秀的程序员,十分优秀！