我正在阅读一本关于React和Universal应用程序的书,其中作者声称以下是将初始状态从服务器传递到客户端的最佳实践:
server.js
import React from 'react';
import {renderToStaticMarkup} from 'react-dom/server';
import Myapp from '../MyApp';
import api from '../services';
function renderPage(html, initialData) {
return `
<html>
<body>
${html}
</body>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialData)};
</script>
<script src="bundle.js"></script>
</html>
`;
}
export default function(request, reply) {
const initialData = api.getData();
const html = renderToStaticMarkup(<MyApp />);
reply(renderPage(html, initialData);
}
然后,在客户端中,您将读出如下数据:
bundle.js
const initialData = window.__INITIAL_STATE__ || {};
const mountNode = document.getElementById('root');
ReactDOM.render(<MyApp />, mountNode);
据我所知,初始状态首先转换为字符串,然后作为全局对象文字附加到窗口对象.
这个解决方案看起来非常粗糙.这本书是在2016年中期发布的.使用的方法window.__INITIAL_STATE__仍然是如何做到这一点还是有更好的解决方案？
例如,我可以想象,可以在单独的微服务调用中提供初始状态,然后也可以比将数据直接嵌入到文档中更好地缓存,因为这样初始状态数据必须每次传输页面刷新的时间,即使数据没有改变.
在我的reactjs-universal组件中，我这样写：
const mapStateToProps = (store) => {
return {
cars: store
}
}
export default connect(mapStateToProps)(SearchForm)
在同一组件中，我想调度一个类似的动作：
store.dispatch({type: 'SHOWDETAIL', data: 'hi'});
运行此命令后，我得到：
Uncaught TypeError: _create2.default.dispatch is not a function
是否有可能以某种方式在我的组件中获得对商店的引用，以便我可以分派动作？
通用或服务器端渲染会在将页面发送到客户端之前组成页面。那时，除非使用cookie，否则用户没有机会提交任何凭据。JWT鼓励使用LocalStorage而不是cookie来存储令牌，我认为这是一个好习惯。
我正在尝试为类似于博客的应用设置SSR。用户创建的内容可以是公开的（任何人都可以找到并阅读）或私有的（只有用户和协作者才可以找到并阅读）。在SSR上处理公共内容很容易，但是私有内容需要存储在LocalStorage中的令牌。
我能想到的最好的解决方案是发送一个存根，或者一个加载页面，客户端可以从中将凭据发送到服务器以检索私有内容。我看到的这种方法的问题是一种私密性：显示加载页面或存根会泄漏出该URL上实际上有内容，即使由于没有凭据而解析为404时也是如此。发送存根/加载页面以获取所有公共或私人内容的内容，将会破坏服务器端呈现的目的。
所以我的问题是，处理需要身份验证而不使用Cookie的呈现内容的最佳实践是什么？欢迎任何示例。尽管我目前使用的是Angular 5，但任何框架都可以。
authentication privacy jwt angular-universal react-universal
我无法呈现 React 服务器端。我总是得到^
参考错误：文档未定义
var root = document.getElementById('root');
我知道节点不理解浏览器文档对象是怎么回事。但我似乎无法修复它。我在 webpack、服务器或 app.js 中做错了什么吗？
这是我的代码
服务器.js
import express from 'express';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './src/store/configureStore';
import routes from './src';
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
/**
* React application route, supports server side rendering.
*/
app.get('/*', function(req, res) {
// Create a context for <StaticRouter>, which …嘿我想在同一行设置两个textInputs,在android模拟器中命名为Expiration date和CVV.
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.label}style= {{width : 100}}>Expiration date</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputdate} />
</View>
<Text style={styles.label}>CVV</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputcvv } maxLength={17} />
</View>
这里包括两个textInputs的CSS
inputWrap: {
borderColor: '#cccccc',
borderBottomWidth: 1,
marginBottom: 10,
},
inputdate: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
inputcvv: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
请让我知道如何在同一行设置此... ..提前感谢
reactjs ×4
javascript ×2
android ×1
ecmascript-6 ×1
jwt ×1
node.js ×1
privacy ×1
react-native ×1
react-redux ×1
webpack ×1