问题标签 [isomorphic-javascript]

我有一个包含表单的 React 应用程序，该表单在服务器端呈现，预先填充了用户正在进行的工作。问题在于，如果用户在应用加载之前编辑表单中的值，那么应用就不会意识到更改。当用户保存时，服务器渲染的未更改数据被重新保存，并且用户的新数据被丢弃，尽管它仍然显示在表单中。简而言之，React 和最初加载时替换的标记中的输入值之间似乎存在脱节。

我想我可以将 refs 放在每个输入上，并将它们的值复制到 componentDidMount 上的应用程序状态中，但必须有更好的方法。有没有其他人解决过这个问题？

更新

我现在认为解决这个问题的最好方法是让 React 在创建校验和时考虑输入值。GH问题：https ://github.com/facebook/react/issues/4293

我正在用 webpack 编写一个同构键值存储。

这是我目前加载库的方法，这显然行不通，因为 webpack 想要同时解析require. 什么是正确的方法？

我知道，你可以为webpack提供一个目标。但我不知道如何使用它。

谢谢！

我们想建立一个生产就绪的社交网络网站（Facebook 或 Instagram 风格）。我们计划在服务器端使用 Node，并正在寻找在服务器端渲染视图组件的最佳技术。

SEO 友好性是必须的，因此 Angular 似乎不太合适（除非有人可以提倡将 Prerender.io 作为可靠的选择）。

我们还希望支持 AJAX，以便大部分渲染将在服务器上完成，但更新将在客户端完成。

看过 React 之后，这似乎是一个不错的选择，但我担心一件事 - 开箱即用，您需要在路由级别而不是组件级别加载所有数据（因为 renderToString是同步的 - 请参阅此处的讨论

如果我们传递 React，我真的不明白什么是服务器端渲染的可靠替代方案。

如果我理解正确，基本方式（允许从子组件中异步加载）将类似于：

看似使用 Jade 之类的模板引擎可能会减轻我们的一些负担，但我似乎在这个所谓的“React vs. Templating engine”问题上找不到任何东西，所以我可能没有正确地看到它。

谢谢。

关于同构通量应用程序中存储数据填充的问题。（我正在使用 react、alt、iso 和 node，但理论适用于其他示例）

我有一个通量“商店”（http://alt.js.org/docs/stores/），需要从 api 获取数据：

当用户浏览 SPA 时，更多数据将通过 http 请求加载。

我希望这个应用程序是同构的，以便我可以呈现应用程序完整的 html，包括最新的数据服务器端，并将其返回给用户以快速初始页面加载。

react.renderToString() 让我将应用程序呈现为 html，并且我可以使用 alt&iso 来播种数据，例如：

问题是在运行 js 服务器端时我会看到错误，因为商店会想要发出一个它无法执行的 http 请求（因为节点中不存在 xmlhttprequest）

解决这个问题的最佳方法是什么？

我能想到的唯一解决方案是将商店中的 httprequest 包装为：

有更好的想法吗？提前致谢。

我正在尝试构建一个符合最佳实践的同构 React 应用程序。我目前只是想为服务器找到一个好的系统。以下是我的一些要求：

要求

• 我想使用反应路由器
• 我试图避免使用通量架构，因为它对我的简单应用程序来说太过分了
• 我希望我的 React 组件是纯的，所以它们不应该将模型数据存储在它们的内部状态中
• React 组件也不应该自己获取它们需要的数据，这些数据应该通过props
• 如果一个组件需要异步加载数据，那应该在渲染之前发生在服务器上

简单的示例应用程序

我做了一个小示例应用程序，应该说明我的问题/困惑：https ://github.com/maximilianschmitt/ipman

基本上，组件树如下所示：

路由.js

组件/ip.js

我的问题/任务是：

• 如果我导航到，我希望服务器从http://ip.jsontest.com/ip请求自己的 IP 地址，以某种方式将其传递给组件，然后将所有内容呈现为字符串，以供客户端查看为 HTML。Ip
• 我想我想避免在组件内部发出 HTTP 请求，而是想通过必要的信息传递props

我知道诸如alt.js和其他同构通量实现之类的库通过商店的概念解决了这个问题，但我想知道这是否有点矫枉过正。

有没有一种简单的方法来添加所需的功能？

我认为在实现同构单页应用程序时，您还开发了一个私有 api，您的客户将点击该 API 进行更新，这是隐含的。

我的问题是，当您将代码更改推送到服务器时，将会有“陈旧”的客户端仍在运行您的旧客户端代码，然后使用可能不兼容的参数和假设来访问您的 api。

我看到两种可能的解决方案：

1. 版本化你的 api。您的客户端代码必须使用其当前版本号访问 api；您的服务器代码因版本控制逻辑而变得臃肿。
2. 实现某种套接字/推送消息，以告诉客户端在部署发生时进行整页刷新以获取最新部署的代码。（这些连接在服务器部署后是否仍然完好无损？）

（如果您还需要支持移动应用程序客户端，那么 API 版本控制是必要的，但对于一个网站来说，似乎有很多不必要的工作。）

其他人遇到或解决这个问题吗？我还有其他选择吗？

我尝试使用 IMA.js 框架（https://github.com/seznam/IMA.js-skeleton ）创建我的第一个 javascript 同构应用程序。乍一看，我有几个问题：

1. 调用“gulp.dev”会打开新的 Chrome 窗口。

   a) 为什么选择 Chrome？我可以改变它吗？如果我使用火狐怎么办？如果我根本没有 Chrome 怎么办？

   b) 为什么我不能关闭窗口？

2. 有使用 IMAError 的建议。这是为什么？

3. 为什么我必须将 $Utils 转发给 props？它的作用是什么？

4. Controller 和 View 究竟是如何通信的？

为了了解 React.js，我正在开发一个简单的布告栏应用程序，它可以在客户端和服务器端呈现视图。不幸的是，我遇到了障碍。

该文件components/index.jsx当前如下所示：

它在服务器端渲染得很好，但我注意到handleSubmit()方法NoticeForm并没有绑定到onSubmit事件，这似乎是合乎逻辑的。我在页面加载时加载已编译的模板文件，那么如何在页面加载时应用它？从文档中不清楚我是如何做到的。

完整的源代码在这里，虽然我还没有提交该handleSubmit()方法。

我用 reactjs、flux（没有第三方实现）和 react-router 开发了 spa。

我现在如何使它同构？用于 SEO 和更好的初始加载性能。

我正在使用 react 和 express.js 开发一个同构应用程序。我正在使用 React Router 进行客户端路由。运行应用程序时，我在控制台中收到以下错误和警告

警告：失败的 propType：提供给handler的类型无效的道具，预期的。objectRoutefunction

警告：提供给预期handler的类型的无效未定义。objectUnknownComponentfunction

TypeError：type.toUpperCase 不是函数

这是components/main.jsx的代码

这是components/routes.jsx的代码

这是服务器端渲染代码.. app.js