如何将组件函数中的HTML/HEEX代码迁移至独立模板文件？

1. 创建独立HEEX模板文件 #

在项目目录的对应位置，为组件创建单独的HEEX模板文件。比如针对MyAppWeb.Live.PostComponents，新建路径为lib/my_app_web/live/post_components/card.html.heex的文件，将原组件中~H""包裹的HEEX代码完整复制进去：

<div class="row ....">
    <nav class="......"></nav>
    <%= live_redirect "...", to: @content.slug, class: "stretched-link" %>
  <%= if  do %>
    blah-blah-blah-blah-blah-blah
  <% end %>
</div>

2. 修改组件模块的card函数 #

更新MyAppWeb.Live.PostComponents中的card函数，移除内嵌的~H""代码块，改用render/3函数调用刚创建的模板文件，确保传递所有必要的assigns参数：

defmodule MyAppWeb.Live.PostComponents do
  use Phoenix.Component
  use Phoenix.HTML

  def card(assigns) do
    render("card.html.heex", assigns)
  end
end

3. 验证效果 #

原组件的调用方式（比如<.card content={@post} />）无需修改，启动项目后渲染效果会和之前完全一致。

额外注意事项 #

• 如果需要对assigns做预处理（比如设置默认值），可以在调用render前完成：

  def card(assigns) do
    assigns = assign_new(assigns, :content, fn -> %{} end)
    render("card.html.heex", assigns)
  end
  

• 模板文件路径需和组件模块结构对应，Phoenix会自动在组件所在目录下的同名模板文件夹中查找文件，也可使用完整视图路径，但相对路径写法更简洁。

内容的提问来源于stack exchange，提问作者Marco C. Stewart