问题标签 [react-on-rails]

我正在使用react-on-rails设置一个项目来进行初始渲染服务器端。我已经将它与 react-router 集成，并成功地为任何给定页面的初始加载渲染服务器端，并且 react-router 从那里接管并充当常规的 React 客户端应用程序/路由器。我不确定初始加载的最佳方式props，因为初始页面可以是网站的任何“页面”。我没有在网上找到任何集成示例。

例如，如果向 发出请求，与向发出的请求/page-one相比，它需要不同的数据作为服务器渲染的道具发送/page-two。

在 Rails 中，所有请求都被重定向到索引视图，其中包含react_component依次呈现正确的页面。

路线.rb：

索引/index.html.erb：

这很好用，但是如何根据请求的页面填充这些道具？

如果在进行服务器端渲染时，（通常情况下）用于获取数据的异步调用将发生在服务器端，那么道具就无关紧要了，那就太好了。这可能吗？或者，除了通常通过客户端 AJAX 请求获取的现有 API 之外，我是否必须动态确定应该是什么道具，并有一个单独的服务器端进程来处理它？

我觉得我在这里错过了拼图的关键部分，只是不确定它到底是什么。

我正在尝试这个包：https ://github.com/shakacode/react-webpack-rails-tutorial按照说明设置热重载。

运行项目foreman start -f Procfile.hot并刷新网页时，我在 js 包上收到 504 错误。在控制台中我得到这个：

我不确定导致此问题的项目的哪个部分，我该如何解决？

我正在使用react_on_rails开发 Rails 引擎和应用程序。

我编写了一个具有单个组件的 Rails 引擎 - NewComponent. 它使用 react_on_rails。这已经通过 rails 引擎的虚拟应用程序进行了测试。我在虚拟应用程序中导入并注册了组件 /new_engine/test/dummy/client/app/Index.jsx：：

以上在虚拟应用程序中工作得很好。而且我能够在视图中进一步渲染这个注册的组件。

现在我在一个成熟的应用程序中使用这个 React 组件作为一个可安装的 Rails 引擎。如何导入此组件以便在应用程序中注册它？在虚拟应用程序中，我能够提供导入组件的相对路径。在使用 gem 时，这样的相对路径在应用程序中是不可能的。

我已经在网上检查了这个问题的答案，但是关于 react_on_rails 引擎的文档似乎很少。

React_on_rails v9 使从服务器端传递道具变得轻而易举，因此当 prerender设置为 true 时，使服务器端渲染变得如此简单。但面临的挑战是在尝试实现 React Router v4 时。反应路由器的问题是无法从服务器端传递道具

我相信有关从 v7 升级到 v9 的文档将解决此问题 - https://github.com/shakacode/react_on_rails/issues/809#issuecomment-334344969。但在我等待的同时，我认为我们仍然可以做一些事情来解决路由问题。

以下是一些重现的步骤：

应用程序/javascript/bundles/RailsNg/components/ServerHome.jsx

应用程序/javascript/bundles/RailsNg/components/ClientHome.jsx

};

应用程序/javascript/bundles/RailsNg/components/routes/routes.jsx

应用程序/javascript/bundles/RailsNg/components/RailsNg.jsx

应用程序/javascript/packs/rails-ng-bundles.js

应用程序/javascript/packs/clientRegistration.js

应用程序/视图/rails_ng/index.html.erb

应用程序/视图/布局/rails_ng.html.erb

应用程序/控制器/rails_ng_controller.rb

config/application.rb - 这个文件被配置为让 rails 从资产管道中获取 saas 字体。

我在 Google Chrome 控制台中的结果：

反应路由器的问题是无法从服务器端传递道具。这个with-react-router-screenshot显示无法传递来自服务器的图像道具。这是由于RailsNg组件通过了路由器。我没有足够的声誉发布两个以上的链接。但是没有RailsNg组件通过反应路由器，图像道具从服务器端渲染。

非常感谢您的帮助。谢谢。

对于那些熟悉 react-on-rails gem，或者更一般地说，纱线的人：

就在今天，我通过 Homebrew 将我的 Node 版本更新为 8.8.1。现在，当我尝试运行bundle && yarn && foreman start -f Procfile.dev（或只是安装 yarn）时，我收到以下消息：

错误 react-webpack-rails-tutorial@0.0.1：引擎“节点”与此模块不兼容。预期版本“5.10.0”。

错误发现不兼容的模块

info 访问https://yarnpkg.com/en/docs/cli/install以获取有关此命令的文档。

这可能是我遇到的一个非常简单的问题，但经过几个小时的调试后我无法修复它。

我尝试将 package.json 中的 Node 版本手动更新为我的计算机上的版本（似乎没有生效），通过 Homebrew 将我的版本降级到 5.10.0（但无法），甚至升级到最新版本的 gem，这意味着也安装 webpack。

无论我做什么，我的本地服务器启动 ( bundle && yarn && foreman start -f Procfile.dev) 仍然导致上述相同的错误。对这个可怜的灵魂有什么想法吗？

我是反应新手，并使用 react_on_rails 将反应带入 Rails 应用程序。我不是 100% 确定我在这里做错了什么。

这是一个公司列表，我正在使用一个表单来允许用户过滤列表。我让表单提交工作，并且我正确地从 rails 应用程序返回结果（通过将响应记录到控制台进行测试），但我不能打赌表本身会实际更新。

我怎样才能做到这一点？

公司.jsx

CompanyFilters.jsx

公司列表.jsx

我正在尝试将渲染函数中的值传递给组件：

路线.jsx

App.jsx（组件）

这个完整的流程似乎没有一个连贯的答案。

我尝试了以下方法：

但这仍然没有回答获取初始渲染调用（react_component）提供的值的问题

我正在使用react_on_rails gem 与 rails 一起工作。我正在尝试将react-select用于 React 选择控件。但是当我导入和使用时：

但看起来css不适用。在 chrome 控制台上查看时，我没有看到任何 css 应用。

我认为 react_on_rails 不适用于库的反应组件中的某些资产。请告诉我怎么做。

我正在尝试设置我的第一个 react/redux/rails 应用程序。我正在使用 react_on_rails gem 传递我的 current_user 和 gyms 道具。

到目前为止，一切似乎都正常，除了我的控制台显示错误：

谷歌搜索给我提示，如果您尝试在渲染方法中创建商店，这可能会发生这种情况，这会导致商店重新创建。我在这里看不到这个问题。我哪里错了？

../store/gymStore.jsx

我不确定我的渲染组件是否必要，但万一是：

在我的 Meals#index 页面上，我想显示一个地图，该地图呈现显示地图边界内的所有餐厅。（每餐都属于一家餐厅，地图实际上是与餐食列表一起显示的，就像 AirBnB 搜索页面一样，但显示的是食物而不是公寓）

当我尝试从 Rails 获取数据到 React 时，我收到以下错误：

缺少关键字：min_lat、max_lat、min_lng、max_lng

地图.js

餐饮控制器.rb

模型/餐厅.rb

餐食/index.html.erb