我目前正在使用 express、mongoose 和 React 开发一个应用程序。
服务器渲染:
- 从我的本地 API 获取数据(存储在 mongoose 中)
React.renderToString组件以来自 API 的数据作为 props
这适用于静态 UI。但是，现在我想在 UI 中进行一些交互。因此，我必须再次在客户端渲染具有相同 Prop 的相同组件。现在我正在努力寻找在客户端获取我的 Mongoose 数据( Prop )的最佳方法......是否真的有必要将我所有来自 Mongoose 的 json 数据保存在脚本标记中然后像这样读出来？
if (typeof window !== 'undefined') {
var props = JSON.parse(document.getElementById('props').innerHTML);
React.render(MyComponent(props), document.getElementById('reactMarkup'));
}
此外，另一种方法是在 componentDidMount 函数中进行 ajax 调用。你更喜欢哪种方式？如果您能在没有脚本标记或 ajax 调用的情况下帮助我这样做，那就太好了……:)
最佳答案
如果您希望 React 在客户端透明地升级到 SPA，您需要在客户端使用与在服务器端相同的 props 构建顶级组件。最常见的方法是您已经提到的方法:序列化您使用的 Prop 并将它们传递到脚本 block 或类似的主机页面。
如果您在 componentDidMount 中执行 Ajax 请求，您将在没有属性的情况下渲染一次，覆盖预渲染的 HTML，然后使用正确的属性重新渲染——我可能会避免这种技术。
关于express - React 服务器/客户端渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28918426/