meteor - 当用户注销时，内部带有图标的 {{#if currentUser}} 仍然呈现

Question

感谢您阅读我的消息，这是我的问题:

我正在使用由 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 图标的问题，我尝试使用普通图像而不是图标，它的行为正常，但我需要在我的应用程序的某些地方使用此类语句中的图标。

提前致谢!

Answer 1

这是因为 font Awesome 5 取代了 <i>带有 svg 的标签如果代码没有包装在另一个流程元素中，这将破坏代码的 react 性。尝试包装 <i>与 <span>为了保持 react 性:

<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"}}