Rails 7中link_to内嵌套<span>标签的实现问题

需求 #

需要生成如下HTML结构：

<section id='option1'>
  <a href='#option1'><h6>Option1</h6><span>&#x3e;</span></a>
  <div class='content'>Option1 content...</div>
</section>

使用Ruby循环构建多个此类section实现手风琴UI时，<span>标签无法在link_to内正确嵌套，尝试代码如下：

<% %w[option1 option2].each do |act| %>
  <%= tag.section do %>
    <%= link_to("#{act}".capitalize, "##{act}", {class: 'centered', data: { turbo_frame:"content"}}) do %>
      <%= tag.h6 act do %>
        <%= tag.span raw "&#x3e;" %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

运行时报错：undefined method 'stringify_keys' for "option1":String，需修复代码生成目标结构。

错误原因 #

报错源于tag.h6 act do ...的写法错误：tag.h6的第二个参数应为属性哈希，但这里传入的字符串act被当作属性处理，触发了仅哈希对象拥有的stringify_keys方法调用。同时原代码还存在以下问题：

• 未给section标签添加目标id
• 错误地将span嵌套在h6内部
• 缺失div.content部分

正确代码 #

<% %w[option1 option2].each do |act| %>
  <%= tag.section id: act do %>
    <%= link_to "##{act}", class: 'centered', data: { turbo_frame: "content" } do %>
      <%= tag.h6 act.capitalize %>
      <%= tag.span raw "&#x3e;" %>
    <% end %>
    <%= tag.div class: 'content' do %>
      <%= "#{act.capitalize} content..." %>
    <% end %>
  <% end %>
<% end %>

关键修正点 #

1. 为tag.section添加id: act，匹配目标HTML的id属性
2. 调整link_to块写法：块形式下第一个参数为URL，第二个参数为属性哈希，链接内部内容由块提供（无需在第一个参数传入标题文本）
3. 将h6与span设为link_to块内的同级元素，还原目标结构
4. 补充div.content部分，完整实现需求结构
5. 修正tag.h6的调用方式，直接传入文本内容生成独立标签

内容的提问来源于stack exchange，提问作者Matteo