Next.js 条件付きスタイル

Question

<p>パスがリンクの href と一致する場合にリンクを有効にしたいと考えています。 </p>
<pre><code> 関数 Component() {
 const パス名 = usePathname();
  戻る （
      <div className="リンク">
        <Link href="/">ホームページ</Link>
        <Link href="/store" className={`${pathname === this.href && "active"}`} >store</Link>
        <Link href="/actors">アクター</Link>
      </div>
 ）
 }</code>

<コード>

これを試してみましたが、残念ながらうまくいきませんでした。このようなことはできますか?

Answer 1

クラス コンポーネント内でのみアクセスできる機能コンポーネントでは this を使用できません。望む効果を実現するには、コードを手動で記述するだけです。例:

リーリー

また、className で && を使用しないように注意してください。条件が true でない場合、className に false が追加されるため、条件が true の場合は三項演算子を使用して "" を追加できます。間違い 。