Next.js 条件付きスタイル
P粉596161915
2023-08-10 16:17:51
<pre class="brush:php;toolbar:false;"><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></pre>
<コード>
<p>これを試してみましたが、残念ながらうまくいきませんでした。このようなことはできますか? </p></code></pre>
クラス コンポーネント内でのみアクセスできる機能コンポーネントでは this を使用できません。望む効果を実現するには、コードを手動で記述するだけです。例:
リーリーまた、className で && を使用しないように注意してください。条件が true でない場合、className に false が追加されるため、条件が true の場合は三項演算子を使用して "" を追加できます。間違い 。