Rails 7 + Hotwire/Turbo：turbo_frame_tag未按预期渲染问题

原因 #

HTML表格的DOM结构有严格嵌套规则：<tbody> 内部只能直接放置 <tr> 元素，<turbo-frame> 属于块级元素，不符合表格的结构规范。浏览器会自动对不合法的DOM结构进行修正——将<turbo-frame>移到表格外部，同时把原本的<tr>留在<tbody>中，这就导致你看到turbo-frame标签空着且跑到表格外面。

解决方案 #

你可以通过两种方式绕过这个限制：

• 给<tr>添加data-turbo-frame属性
  这种方式不需要用<turbo-frame>标签包裹整行，而是通过属性关联对应的turbo-frame，既符合表格结构规范，又能实现turbo-frame的功能：

  <tbody>
    <% @users.each do |user| %>
      <tr data-turbo-frame="user_row_<%= user.id %>">
        <%= render "user/row", user: user %>
      </tr>
      <!-- 可将turbo-frame放在表格外或同一行的任意td中 -->
      <turbo-frame id="user_row_<%= user.id %>" style="display: none;"></turbo-frame>
    <% end %>
  </tbody>
  

• 将<turbo-frame>放在<tr>内部
  把turbo-frame标签放在<tr>里，包裹该行的单元格内容，这样不会破坏表格的结构：

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <turbo-frame id="user_row_<%= user.id %>">
          <td><%= user.name %></td>
          <td><%= user.email %></td>
          <!-- 其他单元格内容 -->
        </turbo-frame>
      </tr>
    <% end %>
  </tbody>
  

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