Ruby on Rails link_to 渲染多次

Question

我有一个索引页，显示多张发货卡。我想将每个货件包装在一个 link_to 中，该链接将访问货件的显示页面。由于某种原因，当我在浏览器开发工具中检查 HTML 时，我可以看到 link_to 呈现多次，并且生成的标签没有按预期围绕卡片。我做错了什么？

这是我的代码：

<%= render Atoms::PageLayoutComponent.new(header: "Orders") do |page_layout| %>
  <% page_layout.with_header_slot do %>
    <%= render Ui::Shipment::ShipmentFiltersComponent.new(shipments: @shipments) %>
  <% end %>
  <% page_layout.with_page_content do %>
    <%= turbo_frame_tag "reseller_shipments_results" do %>
      <div class="grid gap-3">
        <% @shipments.each do |shipment| %>
          <div class="grid grid-cols-1 gap-0.5 lg:grid-cols-[75%_25%] lg:gap-2">
            <%= link_to reseller_shipment_path(shipment.shipment_reference), data: { turbo_frame: "_top" } do %>
              <%= render Ui::ShipmentComponent.new(shipment:) %>
            <% end %>
            <%= render Ui::InvoiceTogglesComponent.new(shipment:) %>
          </div>
        <% end %>
      </div>
    <% end %>
    <div class="grid place-content-center">
      <%== pagy_nav(@pagy) %>
    </div>
  <% end %>
<% end %>

HTML 示例：

<div class="grid grid-cols-1 gap-0.5 lg:grid-cols-[75%_25%] lg:gap-2">
  <a data-turbo-frame="_top" href="/reseller/shipments/123"> </a>
  <div class="rounded bg-white p-3 shadow hover:shadow-lg transition-all duration-200">
    <a data-turbo-frame="_top" href="/reseller/shipments/123"> </a>
    <div class="grid gap-2 text-neutral-300 text-xs">
      <a data-turbo-frame="_top" href="/reseller/shipments/123">
        <div class="flex justify-between">
          <div class="flex gap-2 flex-wrap items-center">
            <div class="text-neutral-500 font-semibold">
              xxxx
            </div>
            <div>
              xxxx
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

我有另一个索引页面，其布局完全相同，并且链接按预期呈现（卡片周围有一个标签）。这就是为什么我期望上面的发货索引页代码能够完全相同，但我不明白为什么它不工作。

这是索引页面的代码，其中的 link_to 按预期工作：

<%= render Atoms::PageLayoutComponent.new(header: "Find a rule/regulation") do |page_layout| %>
  <% page_layout.with_page_content do %>
    <%= render Ui::ShipmentRules::ShipmentRulesFiltersComponent.new(shipment_rules: @shipment_rules) %>
    <%= turbo_frame_tag "reseller_shipment_rules_results" do %>
      <div class="grid gap-3">
        <div>Recently updated rules</div>
        <% @shipment_rules.each do |shipment_rule| %>
          <%= link_to reseller_shipment_rule_path(shipment_rule), data: { turbo_frame: "_top" } do %>
            <%= render Ui::ShipmentRules::ShipmentRuleComponent.new(shipment_rule:) %>
          <% end %>
        <% end %>
      </div>
    <% end %>
    <div class="grid place-content-center">
      <%== pagy_nav(@pagy) %>
    </div>
  <% end %>
<% end %>

Answer 1

看起来您正在使用ViewComponents。我相信您可以使用捕获兼容性补丁修复此问题。

使用以下内容创建文件

config/initializers/view_component.rb

并重新启动服务器：

Rails.application.configure do
  config.view_component.capture_compatibility_patch_enabled = true
end

（您也可以将其粘贴到您的环境配置中）