Image showing my rails structure for react
我有很多 React 组件，并希望让它们更有条理。所以我会切入正题，问。是否可以将我的反应组件放在目录中，如果可以，我如何在视图和其他反应组件中选择它们？
我已经尝试了一些变体，例如下面的变体，但都没有成功，我担心这根本不可能？也找不到任何关于此的文档。
<%= react_component('OutfitCreate.Images') %>
编辑：澄清一下，我想明确说明我使用的是典型的 Rails 项目结构，而对于 react，我正在使用 react-rails gem 来处理我的组件以及生成它们。
Edit2：为了进一步澄清，我正在寻找一种按目录定位反应组件的方法：
<%= react_component('<directory>/<classname>') %>
每个目录都是“组件”的子目录。
【问题讨论】：
标签： ruby-on-rails reactjs react-rails
我知道这是一个老问题，但也许它对任何人都有帮助。你可以这样做：
<%= react_component "ComponentFolder/ComponentClassName" %>
它适用于 rails-react 和 webpacker。
【讨论】：
users/Users.js。当我` 时，它会引发一个错误，提示“找不到组件”users/Users”。
folder_name/ComponentName 配合得很好，还有一个错误仅显示为[Webpacker] Compilation failed 而没有详细信息
我最近使用了react-rails gem，体验很好。它负责访问您在 Rails 模板中的组件并做一些其他的好事。
要具体回答您的问题，您可以将组件放入任意数量的目录中，只要您遵循 gem 文档即可。 gem 提供了一个视图助手，允许您渲染特定组件，并将数据作为道具传递给它（助手获取成为组件道具的哈希）。
编辑——我不确定你是否已经在使用 gem，你使用的辅助方法看起来像，但你没有特别提到它。 gem 安装和/或设置可能存在问题。您需要编辑 application.js 并运行生成器任务：rails g react:install
编辑 -- 为确保您可以访问组件子目录中的组件，您应该执行以下操作：
*运行生成器：rails g react:install
*确保生成的 components.js 文件包含：//= require_tree ./components
*确保您的 application.js 文件包含：
//= require react
//= require react_ujs
//= require components
【讨论】：
components 目录中的组件应该可供您访问。我已经用有关设置的更多详细信息更新了我的答案。你做了这些事情，你还有问题吗？
React 组件将被视为 全局，因为所有 .js 将被压缩到一个大 .js 文件中。因此，您将不得不考虑一些因素。
首先，在您的 sprockets 文件（通常是 application.js）中，您需要告诉 Rails 提供您想要的 React 组件。简单的方法是要求 components 文件夹中的所有文件夹和文件，因为您的所有组件都将在那里，但组织在子文件夹中。这是添加下一行：
// File: app/assets/javascripts/application.js
//= require_tree ./components
其次，如果你想使用你的 React 组件，例如 Images，可以在 ../components/folder/images.js 中定义，你可以在你的 中使用Rails 像往常一样查看助手react_component('Images')。
React 会找到 Images 组件，如果它与您在一些服务的 .js 中定义的 Images 组件 匹配（但是一个理智的人会希望你在一些 images.js 中定义了 Image Component）因为这个名称 Images 是全局的（记得吗？将提供一个大的 .js 文件）。
使用这种方法，客户端将只下载一个包含所有 React 组件的大 .js 文件。下载速度不好，但可以缓存。
因此，在这里，您必须小心为所有组件命名，每个组件都使用不同的名称。
现在，如果您在 ../components/folder/doesnt_matter.js 中有一个名为 Foo 的组件，并且在 ../components/another_folder/this_neither.js 中有另一个同名 Foo 的组件，您将拥有告诉 Rails 你想为要渲染的特定视图提供哪个文件，以规避冲突名称问题。
这意味着，您可以让客户端只下载渲染页面所需的 js 代码（以及所需的 React 组件）。它将为每个页面下载 .js 文件，失去缓存的可能性。
执行此操作的一种中间方法是为同一控制器中的所有视图提供一个中等大小的 .js 文件。
为此，您可以组织您的 js（或 jsx，或...），以便为通用组件（用于两个或多个控制器）和每个控制器的特定文件夹提供一个位置里面有特定的 React 组件。
首先，您必须将 application.js 中之前添加的 //require_tree ./components 替换为 //require ./components/common/，以便仅向 所有视图 提供常见的 React 组件。
其次，在您的布局中，您可以提供两个 js文件；一个 application.js 和一个 #{controller_name}.js（这意味着每个控制器一个特定的 .js 文件）。
第三，对于 每个 控制器，您将拥有一个同名的 .js 文件。因此，假设您有一个名为 home_controller 的控制器，那么，您将需要一个 home.js（布局视图中的控制器名称助手将使 rails 查找此文件）在其中，再次使用 sprockets，您将使用 //require ./components/home/ 提供特定的 React 组件
通过这种方式，您必须照顾好您的组织，并且 React 组件名称需要与 .../components/common/ 内部的名称不同。
如果您还想更具体一些，您可以在布局中使用相同的技术并结合controller_name 和action_name 助手。或者您可以使用content_for 询问具有视图所需的 React 组件的特定 .js 文件。
但是，您需要小心，因为我不知道资产管道会对您不利。专门用content_for.
【讨论】：