{{#if currentUser}} 用户注销时仍会呈现内部图标答案

【问题标题】：{{#if currentUser}} with icon inside still rendered when user logs out{{#if currentUser}} 用户注销时仍会呈现内部图标
【发布时间】：2020-06-23 14:55:09
【问题描述】：

感谢您阅读我的信息，这是我的问题：

我正在使用由 Bulma 制作的导航栏，其中我使用 {{#if currentUser}} 显示登录/注册按钮或来自 FontAwesome 的个人资料图片图标，如下所示（“S'inscrire”和“Se 连接器”表示用法语注册和登录）：

<div class="navbar-end">
    <div class="navbar-item">
        <div class="buttons">
            {{#if currentUser}}
                <!-- Displayed only when the user is logged in-->
                <i class="fas fa-user icon is-large" id="userProfile"></i>
            {{else}}
                <!-- Displayed when the user is NOT logged in-->
                <a class="button is-primary register">
                    <strong>S'inscrire</strong>
                </a>
                <a class="button is-light login">Se connecter</a>
            {{/if}}
        </div>
    </div>
</div>

当用户未登录时，它只显示按钮：

当他登录时，我只有图标：

我的问题是，当用户注销时，我得到了用户图标和按钮：

如果我多次登录和退出，我会得到多个图标。看起来这是 FontAwesome 图标的问题，我尝试使用普通图像而不是图标并且它的行为正常，但我需要在我的应用程序的某个位置使用此类语句中的图标。

提前致谢！

【问题讨论】：

标签： meteor font-awesome meteor-blaze font-awesome-5

【解决方案1】：

这是因为 font awesome 5 用 svg 替换了 <i> 标记，如果它没有包含在另一个流元素中，这将破坏您的代码反应性。尝试用 <span> 包裹 <i> 以保持反应性：

<span>
  <i class="fas fa-user icon is-large" id="userProfile"></i>
</span>

你也可以把它做成一个简短的无状态模板：

<template name="icon">
  <span>
    <i class="fas fa-{{name}} {{#if large}}is-large{{/if}}" id="{{id}}"></i>
  </span>
</template>

然后这样称呼它

{{>icon name="user" large=true id="userProfile"}}

【讨论】：