Next.js 조건부 스타일

Question

<p>경로가 링크의 href와 일치하면 링크를 유효하게 만들고 싶습니다. </p>
<사전><코드> 함수 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가 추가되므로 조건이 false인 경우 삼항 연산자를 사용하여 ""를 추가할 수 있습니다.