我有一个React应用程序,其中包含一个表单,该表单呈现在服务器端,预先填充了用户正在进行的工作.问题是如果用户在加载应用程序之前在表单中编辑了一个值,那么应用程序就不会意识到这一变化.当用户保存时,服务器呈现的未更改数据将被重新保存,并且用户的新数据将被删除,尽管它仍显示在表单中.简而言之,在最初加载时它替换的标记中的React和输入值之间似乎存在脱节.
我想我可以在每个输入上放置refs并将它们的值复制到componentDidMount上的应用程序状态,但必须有更好的方法.还有其他人解决了这个问题吗？
更新
我现在认为解决这个问题的最佳方法是在创建校验和时让React考虑输入值.GH问题:https://github.com/facebook/react/issues/4293
在同构反应应用程序中我myModule应该在节点和浏览器环境中表现不同.我想配置此分割点的package.json用于myModule:
package.json
{
"private": true,
"name": "myModule",
"main": "./myModule.server.js",
"browser": "./myModule.client.js"
}
file structure
??? myModule
? ??? myModule.client.js
? ??? myModule.server.js
? ??? package.json
?
??? browser.js
??? server.js
因此,当我myModule在节点中使用时,我应该只得到myModule.server.js:
server.js
import myModule from './myModule';
myModule(); // invoke myModule.server.js
在浏览器端应该只使用 myModule.client.js以下内容构建bundle:
browser.js
import myModule from './myModule';
myModule(); // invoke myModule.client.js
react-starter-kit使用这种方法,但我无法弄清楚这个配置的定义.
package.json 做这种分裂是很好的语义点.myModule.client.js.javascript reactjs webpack isomorphic-javascript react-starter-kit
我有一个要求,我在其中呈现我在其中显示表单的视图.在提交表单时,我需要收集表单数据并创建一个文件,并将表单数据保存为该文件中的JSON.我正在使用React.js,node.js,babel和webpack.
经过努力实现这一点后,我发现我必须使用同构或通用的javascript,即在服务器端使用react和render,因为我们不能在客户端使用fs模块. 将此提交给服务器端.
我运行它: npm run start
在此之后,我可以在控制台中看到[Object Object]从下面的第1行反应组件(HomePage.js)打印到控制台上.但是稍后当我访问此页面时,它会出错:
'bundle.js:18未捕获错误:找不到模块"fs"'
我怎样才能使用fs模块做出反应？
以下是代码段:
webpack.config.js
"use strict";
const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');
module.exports = {
devtool: debug ? 'inline-sourcemap' : null,
entry: path.join(__dirname, 'src', 'app-client.js'),
devServer: {
inline: true,
port: 3333,
contentBase: "src/static/",
historyApiFallback: true
},
output: {
path: path.join(__dirname, 'src', 'static', 'js'),
publicPath: "/js/",
filename: 'bundle.js'
},
module: {
loaders: [{
test: path.join(__dirname, 'src'),
loader: ['babel-loader'],
query: {
//cacheDirectory: …在getServerSideProps我的索引页的功能中，我想使用一个foo从另一个本地文件导入的功能，该功能依赖于某个节点库。所述库不能在浏览器中运行，因为它依赖于“仅限服务器”模块，例如fs或request。
我一直在使用以下模式，但想对其进行优化。定义foo为可变以使其在范围内是笨拙的并且似乎可以避免。
let foo;
if (typeof window === "undefined") {
foo = require("../clients/foo");
}
export default function Index({data}) {
...
}
export async function getServerSideProps() {
return {
props: {data: await foo()},
}
}
这里的最佳做法是什么？是否有可能以某种方式利用 ES6 的动态导入功能？动态导入什么范围内 getServerSideProps？
我正在使用 Next.js 版本9.3.6。
谢谢。
更新：
似乎 Next.js 自己的动态导入解决方案就是这个问题的答案。我仍在测试它，并会在完成后相应地更新这篇文章。这些文档对我来说似乎很混乱，因为他们提到禁用 SSR 的导入，但反之亦然。
我正在React中构建一个Isomorphic Application,它首先渲染一个组件服务器端,然后利用React的智能重新渲染浏览器端.
我遇到过这种情况,在React能够首先呈现浏览器端之前,DOM可能与React组件的状态不同步.这可能发生在用户使用慢速Internet连接时,react.js文件需要一段时间才能下载(这也是我构建同构应用程序的原因)
这是我放在一起展示这种情况的一个例子:http://jsfiddle.net/jesstelford/z4o44esb
var TodoItem = React.createClass({
// ...
render: function() {
return (
<label>
<input type="checkbox" defaultChecked={this.state.done} onChange={this.onChange} />
{this.props.name}
</label>
);
}
});
// User toggles checkbox ON here, before React is rendered browser-side
// render using React browser-side
var renderedComponent = React.render(component, document.getElementById('content'));
// Incorrectly outputs { done: false }
console.log('React state:', renderedComponent.state);
我找到了一个可能的解决方案React refs:http …
我正在使用带有ReactJS前端的Flask Backend开发一个应用程序.ReactJS应用程序已经开发并与webpack捆绑在一起.
与捆绑在一起的客户端渲染一切正常webpack.
我现在正在尝试使用python-react添加服务器端渲染.
但问题是,我必须通过具有根组件节点的Jinja2 template基本模板与我的ReactJS应用程序共享一些变量.index.htmlreactjs<div id='react-node'></div>
我不得不把我routes和config通过我的应用程序jinja2模板如下图所示,
//index.html
<!doctype html>
<html>
...
...
<script type='text/javascript'>
var STATIC_IMAGE_ROOT = "{{ url_for('static', filename='img/') }}";
var ROUTES = { ... };
...
</script>
</html>
所有上述js变量都被设置为全局window对象.
但是当我尝试在python中渲染组件时,它会抛出window对象的异常ReactRenderingError: react: ReferenceError: window is not defined.
解决这个问题的最佳方法是什么？
serverside-javascript flask reactjs webpack isomorphic-javascript
我的React应用程序使用Webpack的相对于我的JS文件的根的需求resolve.root.即我的文件结构包含以下内容:
components
App.react.js
containers
AppContainer.react.js
在AppContainer.react.js中,我有:
import App from 'components/App.react';
这适用于客户端.现在我想让它变得同构.如果我在server.js中需要AppContainer.react.js,则表示components/App.react找不到.节点正在尝试要求containers/components/App.react.js,这是不存在的.如何使Node相对于给定目录？
编辑:我的目录结构如下所示:
css/
html/
js/
components/
App.react.js
containers/
AppContainer.react.js
main.js <- requires AppContainer
public/
server/
server.js <- requires AppContainer
我正试图在iis 上使用带有iisnode的 node.js来运行反应
我已经安装了最新的节点和最新的iisnode,并使用此stackoverflow作为指南,但无法获得过去的错误500. 如何为Web应用程序运行Node.JS服务器？
关于如何在iis上执行此操作的任何指南？
您能否向我们推荐使用nextjs在生产中部署应用程序的最佳实践？
我们正在考虑以下策略:金丝雀部署,蓝/绿部署......我们有几个疑问来处理BUILD_ID.
现在,通过这种策略,我们面临着这样的错误:
INVALID_BUILD_ID,因为在部署的某个时刻,我们至少有两个不同版本的应用程序.
例如:
在Canary部署中,我们有两个不同的版本,Balancer将客户端发送到版本A,但是当客户端需要其他资源时,平衡器可以将此请求发送到版本B的服务器.此时客户端当应用程序获取serp.js,_error.js,_document.js等资源并且未正确加载网页时,会收到500错误.
_next/f6bff019-9550-4029-99fa-2b33a50045f6/page/index.js ---> old (previous deployment)
_next/005b2202-c5b2-4de6-afd8-1c8451d16ab3/page/index.js ---> new (current deployment)
到目前为止,我们测试过:
将BUILD_ID重命名为在两个版本中都具有相同的哈希值,但我们认为这是一种不好的做法,因为我们认为客户端的缓存不会刷新预期的方式.
粘性会话是最可靠的,但我们处理一个无状态应用程序作为一个状态的应用程序,实际上是不正确的.
我们可以在前面放置一个缓存BUILD_ID的CDN,但是我们不确定我们应该为js文件的缓存分配时间.
我正在使用 Semantic-UI React 和 Next.JS，但它出现在断点 < 768px 处，我的 Home 组件在刷新浏览器时完全中断。我知道因为它是一个 React/next.js 应用程序，所以它们负责路由，但我想我想知道如果用户碰巧这样做了怎么办？
\n\n它不会发生在我的 /login、/register 或 /profile 路由上
\n\n所以我已经检查过以解决我的问题 \xe2\x80\x94 Here和在那篇文章中它指向React 文档；为什么会发生这种情况的解释以及解决它的处方似乎不适合我的情况。
\n\n\n\n\n与 render() 相同，但用于水合其 HTML\n 内容由 ReactDOMServer 渲染的容器。React 将尝试将事件侦听器附加到现有标记。
\n\nReact 期望服务器和客户端之间呈现的内容相同。\n 它可以修补文本内容中的差异，\n但您应该将不匹配视为错误并修复它们。在开发模式下，React 会警告水合过程中的不匹配情况。不保证在不匹配的情况下能够修补属性差异。出于性能原因，这很重要，因为在大多数应用程序中，不匹配的情况很少见，因此验证所有标记的成本将非常昂贵。
\n\n如果单个元素\xe2\x80\x99s 属性或文本内容在服务器和客户端之间不可避免地\n 有所不同（例如，\n 时间戳），则可以通过添加\n 抑制HydrationWarning={true} 来消除警告元素。它只能工作一层深度，并且旨在作为逃生舱口。不要过度使用它。除非它是文本内容，否则 React 仍然不会尝试修补它，因此在未来更新之前它可能会保持不一致。
\n\n如果您有意需要在服务器和客户端上渲染不同的内容，则可以进行两次渲染。在客户端呈现不同内容的组件可以读取状态变量，例如 this.state.isClient，您可以在 componentDidMount() 中将其设置为 true。这样，初始渲染通道将渲染与服务器相同的内容，避免不匹配，但附加通道将在水合后同步发生。
\n
这是入口点文件：pages/index
import React from \'react\'\nimport Head from \'../components/head\'\nimport HomeLayout from \'../components/Home/Home.jsx\'\nimport \'semantic-ui-css/semantic.min.css\'\nimport \'../styles/styles.scss\'\nimport { connect } from \'react-redux\'\n\n// import {bindActionCreators} …reactjs ×8
javascript ×5
node.js ×5
next.js ×3
webpack ×3
deployment ×1
flask ×1
forms ×1
iis ×1
iisnode ×1