实时组件的条件渲染在 Phoenix Liveview 中无法按预期工作

Question

我试图根据设备类型显示不同的实时组件，所以我的模板中有这个

<div phx-hook="SpecialScreenSize" id="screen-size"></div>

<div>
  <%= @device_kind %>  
  <%= if @device_kind == :mobile do %>
    <.live_component
      module={NextlairWeb.ListingLive.ShowComponents.ShowMobile}
      id="listing-mobile"
      current_user={@current_user}
      page_title={@page_title}
    />
  <% else %>
    <.live_component
    module={NextlairWeb.ListingLive.ShowComponents.ShowDesktop}
    id="listing-mobile"
    current_user={@current_user}
    page_title={@page_title}
   />
 <% end %> 
</div>

不幸的是，无论设备类型如何，都会显示 show_desktop 实时组件。我注意到当我删除标记以显示 实时组件并有条件地显示设备类型，它按预期工作。我可能做错了什么？

Answer 1

您可能正在运行一个钩子

SpecialScreenSize

来决定屏幕尺寸是移动设备还是桌面设备。钩子稍后执行，你必须触发从phoenix的重新渲染来更新

使用 CSS 效果更好。屏幕尺寸是一个客户端参数，CSS 将帮助您做到这一点。

我的建议是使用 CSS @media 选择器将隐藏 CSS 应用于移动组件。 CSS 可以是

.mobile, .desktop {
    display: none;
}

/* Media query for mobile screens */
@media only screen and (max-width: 767px) {
    .mobile {
        display: block; /* Show mobile on mobile screens */
        /* Add any other styles for mobile on mobile screens */
    }
}

/* Media query for larger screens (tablets and above) */
@media only screen and (min-width: 768px) {
    .desktop {
        display: block; /* Show desktop on larger screens */
        /* Add any other styles for desktop on larger screens */
    }
}

---

现在是组件

<div class="mobile">
  <.live_component
      module={NextlairWeb.ListingLive.ShowComponents.ShowMobile}
      id="listing-mobile"
      current_user={@current_user}
      page_title={@page_title}
  />
</div>

<div class="desktop">
  <.live_component
    module={NextlairWeb.ListingLive.ShowComponents.ShowDesktop}
    id="listing-mobile"
    current_user={@current_user}
    page_title={@page_title}
   />
</div>

如果您使用的是顺风CSS

<div class="block md:hidden">
    Mobile component
</div>

<div class="hidden md:block">
    Desktop Component
</div>