Rails中Helper模块的Tag Helper无法正确渲染嵌套标签如何解决？

问题描述 #

在Rails视图中使用Helper模块的Tag Helper渲染嵌套HTML标签时，第一个嵌套的<span>被忽略，仅渲染了第二个标签，无法得到期望的HTML结构。

期望渲染的HTML #

<span class="flex w-5 h-5 ml-3">
  <span class="animate-ping inline-flex h-full w-full rounded-full aspect-square bg-indigo-400 opacity-75"></span>
  <span class="relative inline-flex w-5 h-5 rounded-full bg-indigo-500 text-gray-200 justify-center aspect-square right-5">
    <%= current_user_active_count %>
  </span>
</span>

现有Helper代码 #

tag.span class: "flex w-5 h-5 ml-3" do
  tag.span class: "animate-ping inline-flex h-full w-full rounded-full aspect-square bg-indigo-400 opacity-75"
  tag.span current_user_active_count, class: "relative inline-flex w-5 h-5 rounded-full bg-indigo-500 text-gray-200 justify-center aspect-square right-5"
end

实际渲染结果 #

<span class="flex w-5 h-5 ml-3">
  <span class="relative inline-flex w-5 h-5 rounded-full bg-indigo-500 text-gray-200 justify-center aspect-square right-5">
    <%= current_user_active_count %>
  </span>
</span>

问题原因 #

Ruby代码块（block）默认只会返回最后一行代码的执行结果，因此第一个tag.span生成的HTML字符串被直接丢弃，仅第二个tag.span的结果被作为父标签的内容返回。

解决方案 #

以下三种方法均可解决该问题：

方法1：字符串拼接 #

将两个tag.span的结果用+拼接，作为代码块的返回值：

tag.span class: "flex w-5 h-5 ml-3" do
  tag.span(class: "animate-ping inline-flex h-full w-full rounded-full aspect-square bg-indigo-400 opacity-75") +
  tag.span(current_user_active_count, class: "relative inline-flex w-5 h-5 rounded-full bg-indigo-500 text-gray-200 justify-center aspect-square right-5")
end

方法2：使用concat方法 #

通过代码块参数获取父标签对象，调用concat方法将子标签依次添加到父标签中：

tag.span class: "flex w-5 h-5 ml-3" do |parent|
  parent.concat tag.span(class: "animate-ping inline-flex h-full w-full rounded-full aspect-square bg-indigo-400 opacity-75")
  parent.concat tag.span(current_user_active_count, class: "relative inline-flex w-5 h-5 rounded-full bg-indigo-500 text-gray-200 justify-center aspect-square right-5")
end

方法3：返回标签数组 #

Rails会自动将数组中的多个标签拼接为完整的HTML内容，因此可以返回包含两个子标签的数组：

tag.span class: "flex w-5 h-5 ml-3" do
  [
    tag.span(class: "animate-ping inline-flex h-full w-full rounded-full aspect-square bg-indigo-400 opacity-75"),
    tag.span(current_user_active_count, class: "relative inline-flex w-5 h-5 rounded-full bg-indigo-500 text-gray-200 justify-center aspect-square right-5")
  ]
end

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