Next.js Gaya Bersyarat

Question

<p>Saya mahu menjadikan pautan itu sah jika laluan itu sepadan dengan href pautan. </p>
<pra><kod> fungsi Komponen() {
 const pathname = usePathname();
  kembali (
      <div className="pautan">
        <Pautan href="/">Halaman Utama</Pautan>
        <Pautan href="/store" className={`${pathname === this.href && "active"}`} >store</Link>
        <Pautan href="/actors">Actors</Link>
      </div>
 )
 }</code>

Saya mencuba ini tetapi malangnya ia tidak berjaya. Bolehkah saya melakukan sesuatu seperti ini?

Answer 1

Anda tidak boleh menggunakan ini dalam komponen berfungsi yang hanya boleh diakses dalam komponen kelas. Untuk mencapai kesan yang anda inginkan, anda hanya perlu menulis kod secara manual, contohnya:

<Link href="/store" className={`${pathname === "/store" ? "active":""}`} >商店</Link>

Juga berhati-hati untuk tidak menggunakan && dalam className, kerana jika syarat itu tidak benar, ia akan menambah false pada className anda, jadi anda boleh menggunakan operator ternary untuk menambah "" apabila syarat itu palsu.