我第一次在我的 React/Redux 应用程序中尝试服务器端渲染。我现在遇到的一个问题是我需要初始状态有一个随机生成的字符串，然后将其作为 Prop 传递给我的主要 App 组件。这显然会导致问题，因为它会为客户端和服务器生成不同的字符串。我能做些什么来阻止这个问题的发生吗？
有助于理解的基本结构:
App.js
import React from 'react';
import { connect } from 'react-redux';
const App = ({ randomStr }) => (
<div>
<p>{randomStr}</p>
</div>
);
const mapStateToProps = (state) => ({
...
});
const mapDispatchToProp = (dispatch) => ({
...
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
还有我的 reducer :
reducer.js
import { generateString } from '../util';
import { NEW_STRING } from '../constants';
const stringReducer = (state = generateString(), action) => {
switch (action.type) {
case NEW_STRING:
return generateString();
default:
return state;
}
};
export default stringReducer;
如您所见，我从我的 redux 存储中获取 randomStr 并呈现它，但它在客户端和服务器中是不同的。任何帮助将不胜感激!
最佳答案
当您在服务器端生成存储和初始状态时，客户端不应该这样做并尝试重新生成数据。
您只需生成一次商店和初始状态(在服务器上)并将其传递给客户端。为此，您需要将其注入(inject)要渲染的初始组件中。
最常见的方法是添加一个 <script>标记并将状态附加到您的窗口，例如 window.__initialState .
例如，如果您使用 ReactDOM.renderToString在服务器端呈现名为 Html 的初始组件，您可以:
const html = ReactDOM.renderToString(<Html initialState={initialState} />);
然后，在您的 Html 中组件，您可以注入(inject)此数据，以便客户端稍后可以使用它:
<script dangerouslySetInnerHTML={{ __html: `window.__initialState=${JSON.stringify(this.props.initialState)};` }}/>
之后，在客户端，你可以使用window.__initialState取回您的数据，您最终会在服务器和客户端上获得相同的数据。
关于javascript - 使用 React 使用随机生成的字符串进行服务器端渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38496512/