如何在 Svelte 中设置依赖于同一元素的另一个属性的类名？

Question

我想根据同一元素的属性设置一个条件类，这样我就可以保持干爽。起初我得到了这个：

  <div class="hidden md:flex items-center space-x-3">
    <a href="#Index" class="navBarLink {currentPageName == 'Index' ? 'activeLink' : ''}">Farm</a>
    <a href="#/Leaderboard" class="navBarLink {currentPageName == 'Leaderboard' ? 'activeLink' : ''}">LeaderBoard</a>
    <a href="#/WafBox" class="navBarLink {currentPageName == 'WafBox' ? 'activeLink' : ''}">WafBox</a>
    <a href="#/Buy" class="navBarLink {currentPageName == 'Buy' ? 'activeLink' : ''}">Buy</a>
    <a href="#/Info" class="navBarLink {currentPageName == 'Info' ? 'activeLink' : ''}">Info</a>
</div>

现在我想要这个：

  <div class="hidden md:flex items-center space-x-3">
    <a href="#Index" class="navBarLink {isActive(this)}">Farm</a>
    <a href="#/Leaderboard" class="navBarLink {isActive(this)}">LeaderBoard</a>
    <a href="#/WafBox" class="navBarLink {isActive(this)}">WafBox</a>
    <a href="#/Buy" class="navBarLink {isActive(this)}">Buy</a>
    <a href="#/Info" class="navBarLink {isActive(this)}">Info</a>
  </div>

然后我只需要在我的函数isActive 中检查href 的属性。但是这里this 里面似乎没有正确的信息。有没有办法做到这一点？它会清理我的代码很多

编辑：isActive() 看起来像这样：

<script>
  function isActive(element) {
    return 'Active' if (currentPageName == element.attr('href'))
  }
</script>

Answer 1

你的方法的一个问题是两者都在

<a href="#/Leaderboard" class="navBarLink {isActive(this)}">LeaderBoard</a>

以及使用 class:directive 提出的答案

 <a href="#Index" class:active-link={isActive('Index')}>Index</a>

是该函数只会在第一次渲染时运行一次，然后永远不会重新执行，即使currentPageName 更改时也不会。

最明显、最直接的解决方案是简单地放弃函数调用并像这样使用 class:directive：

<a href="#Index" class:active-link={currentPageName == 'Index'}>Index</a>   

这将确保类随着 currentPageName 的变化而变化。

Answer 2

当使用箭头语法声明函数并通过添加$: 使其具有反应性时，看起来就像使用class:directive（检查值是否为真/假）的替代方法，类名可以直接设置在@987654324 中@ 属性也是如此

一个REPL

<script>
    let currentPageName = 'Index'

    $: isActive = (linkText) => {
        if (linkText === currentPageName) return 'active-link'
        // else if (...) return 'other-class-name' // possible class name switch
        else return ''
    }  
</script>

  <div class="">
    <a href="#Index" class="{isActive('Index')}">Index</a>   
  </div>
  <div class="">
    <a href="#Leaderboard" class="{isActive('Leaderboard')}">Leaderboard</a>   
  </div>

<br>
<button on:click={() => currentPageName = 'Leaderboard'}>change currentPageName</button>

<style>
    .active-link {
        color: purple;
    }
</style>