Phlex组件能否实现多次yield？如何达成预期渲染效果？

直接多次调用yield无法实现预期效果，因为Phlex中块内容是即时渲染输出的，第一次yield就会把块里的内容全部输出，第二次yield不会重复渲染。要实现多次复用块内容，可以用Phlex提供的capture方法先把块内容捕获为可复用的片段，之后多次渲染这个片段即可。

修改后的组件代码：

class Component < Phlex::HTML
  def view_template
    # 先捕获块内容到变量
    content = capture { yield }
    
    div do
      # 第一次渲染捕获的内容
      content
      
      span { plain "component" }

      # 第二次渲染捕获的内容
      content
    end
  end
end

使用组件时，就能得到你期望的效果：

<%= Component.new do %>
  <div>foo</div>

  <!-- 在此渲染内容为"component"的span -->

  <div>bar</div>
<% end %>

原理说明 #

• capture方法会执行传入的块，并把块内生成的HTML内容保存为一个Phlex::Fragment对象，这个对象可以被多次渲染。
• 这种写法依然保持了组件调用时的块语法，不需要拆分内容为多个参数，符合你的需求。

内容的提问来源于stack exchange，提问作者Sebastián Palma