Как в next js добавить класс к элементу?

Ссылка скопирована
Next.js React
1 ответ

Разбираюсь с next js и столкнулся с такой проблемой - у меня есть меню навбар, работать оно должно, как active links, но с иконками
Задача такая: при определенном якоре (желательно) или ссылке добавлялся класс active
Если раньше в js это я делал, через querrySelectore и classlist.add, то сейчас, я если честно не понимаю, как это реализовывать

Код компонента навбар

"use client" import React from 'react' import Icon from './icons/Icon'   const navLinks = [   { href: "#home_anchor", svgIcon: "home" },   { href: "#user_anchor", svgIcon: "user"},   { href: "#project_anchor", svgIcon: "project"},   { href: "#stack_anchor", svgIcon: "stack"},   { href: "#mail_anchor", svgIcon: "mail"}, ]  const Navbar = () => {    return (     <nav className='flex flex-col fixed bg-gray-800 aligh-center'>       {navLinks.map((link) => {         return (           <Icon href={link.href} key={link.svgIcon} title={link.svgIcon}/>         )       }       )}     </nav>   ) }  export default Navbar

"use client" import React from 'react' import Icon from './icons/Icon' const navLinks = [ { href: "#home_anchor", svgIcon: "home" }, { href: "#user_anchor", svgIcon: "user"}, { href: "#project_anchor", svgIcon: "project"}, { href: "#stack_anchor", svgIcon: "stack"}, { href: "#mail_anchor", svgIcon: "mail"}, ] const Navbar = () => { return ( <nav className='flex flex-col fixed bg-gray-800 aligh-center'> {navLinks.map((link) => { return ( <Icon href={link.href} key={link.svgIcon} title={link.svgIcon}/> ) } )} </nav> ) } export default Navbar

Код компонента иконок(Прошу не обращайте внимание на if if if, собираюсь в switch переделать

import Link from 'next/link' import React from 'react' import SvgHome from './home' import SvgProject from './project' import SvgMail from './mail' import SvgUser from './user' import SvgStack from './stack'   const Icon = (props:{title:string, href:string}) => {   if(props.title == "home"){     return (         <Link href={props.href} className='svgh m-auto' ><SvgHome width="30" height="30" viewBox="0 0 50 50" /></Link>       )          }   if(props.title == "user"){     return (       <Link href={props.href} className='svgh m-auto' ><SvgUser width="30" height="30" viewBox="-5 0 50 50" /></Link>     )   }   if(props.title == "project"){     return (       <Link href={props.href} className='svgh m-auto' ><SvgProject width="30" height="30" viewBox="0 0 50 50" /></Link>     )   }   if(props.title == "stack"){     return (       <Link href={props.href} className='svgh m-auto' ><SvgStack width="30" height="30" viewBox="0 0 50 50" /></Link>     )        }   if(props.title == "mail"){     return (       <Link href={props.href} className='svgh m-auto' ><SvgMail width="30" height="30" viewBox="0 0 50 50" /></Link>     )   }   } export default Icon

import Link from 'next/link' import React from 'react' import SvgHome from './home' import SvgProject from './project' import SvgMail from './mail' import SvgUser from './user' import SvgStack from './stack' const Icon = (props:{title:string, href:string}) => { if(props.title == "home"){ return ( <Link href={props.href} className='svgh m-auto' ><SvgHome width="30" height="30" viewBox="0 0 50 50" /></Link> ) } if(props.title == "user"){ return ( <Link href={props.href} className='svgh m-auto' ><SvgUser width="30" height="30" viewBox="-5 0 50 50" /></Link> ) } if(props.title == "project"){ return ( <Link href={props.href} className='svgh m-auto' ><SvgProject width="30" height="30" viewBox="0 0 50 50" /></Link> ) } if(props.title == "stack"){ return ( <Link href={props.href} className='svgh m-auto' ><SvgStack width="30" height="30" viewBox="0 0 50 50" /></Link> ) } if(props.title == "mail"){ return ( <Link href={props.href} className='svgh m-auto' ><SvgMail width="30" height="30" viewBox="0 0 50 50" /></Link> ) } } export default Icon

Дополнительно:

Примерно так:

{navLinks.map((link) => (     <Icon href={link.href} key={link.svgIcon} title={link.svgIcon} className={isCurrent ? `active` : undefined} /> ))}  ... import classNames, { type Argument } from "classnames";  type Props = {     title: string;     href: string;     className: Argument; }  <Link href={props.href} className={classNames('svgh m-auto', props.className)>     <SvgMail width="30" height="30" viewBox="0 0 50 50" /> </Link>

{navLinks.map((link) => ( <Icon href={link.href} key={link.svgIcon} title={link.svgIcon} className={isCurrent ? `active` : undefined} /> ))} ... import classNames, { type Argument } from "classnames"; type Props = { title: string; href: string; className: Argument; } <Link href={props.href} className={classNames('svgh m-auto', props.className)> <SvgMail width="30" height="30" viewBox="0 0 50 50" /> </Link>

https://www.npmjs.com/package/classnames

  • Спасибо, помогло

Как в обычном реакте:

const Icon = ({title, href, active}) => {     const className = active ? 'active' : '';      return (         <Link href={href} className={`svgh m-auto ${className}`}>             {/* svg */}         </Link>     ); }

const Icon = ({title, href, active}) => { const className = active ? 'active' : ''; return ( <Link href={href} className={`svgh m-auto ${className}`}> {/* svg */} </Link> ); }

'use client' import React, {useState, useEffect} from 'react'; import Icon from './icons/Icon';  const links = [     {href: '#home_anchor', svgIcon: 'home'},     {href: '#user_anchor', svgIcon: 'user'}     // others ];  const Navbar = () => {     const [activeLink, setActiveLink] = useState('');      useEffect(() => {         const handleScroll = () => {             // logic scroll         }          // add anchor         window.addEventListener('scroll', handleScroll);          // remove anchor from unmount         return () => window.removeEventListener('scroll', handleScroll)      }, []);      return (         <nav className="flex flex-col fixed bg-gray-800 align-center">             {links.map((l) => (                 <Icon href={l.href} key={l.svgIcon} title={l.svgIcon} active={activeLink === l.href}/>             ))}         </nav>     ); }

'use client' import React, {useState, useEffect} from 'react'; import Icon from './icons/Icon'; const links = [ {href: '#home_anchor', svgIcon: 'home'}, {href: '#user_anchor', svgIcon: 'user'} // others ]; const Navbar = () => { const [activeLink, setActiveLink] = useState(''); useEffect(() => { const handleScroll = () => { // logic scroll } // add anchor window.addEventListener('scroll', handleScroll); // remove anchor from unmount return () => window.removeEventListener('scroll', handleScroll) }, []); return ( <nav className="flex flex-col fixed bg-gray-800 align-center"> {links.map((l) => ( <Icon href={l.href} key={l.svgIcon} title={l.svgIcon} active={activeLink === l.href}/> ))} </nav> ); }

  • Спасибо!
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Роман IT Ответ

Для добавления класса к элементу в Next.js можно воспользоваться стандартным способом, используя JSX. Вот пример:

```html

import React from 'react';
 
const MyComponent = () => {
  return (
    <div>Этот элемент имеет класс "myClass"</div>
  );
}
 
export default MyComponent;

import React from 'react'; const MyComponent = () =&gt; { return ( <div>Этот элемент имеет класс "myClass"</div> ); } export default MyComponent;

```

В этом примере мы создали функциональный компонент MyComponent, который возвращает div с классом "myClass". При рендеринге этого компонента, указанный класс будет применен к этому элементу.

Если вам нужно добавить класс к элементу на основе условия или переменной, вы можете это сделать так:

```html

import React from 'react';
 
const MyComponent = ({ isActive }) =&gt; {
  return (
    <div>
      Этот элемент имеет класс в зависимости от значения isActive
    </div>
  );
}
 
export default MyComponent;

import React from 'react'; const MyComponent = ({ isActive }) =&gt; { return ( <div> Этот элемент имеет класс в зависимости от значения isActive </div> ); } export default MyComponent;

```

В этом примере мы передали пропс isActive в компонент MyComponent, и в зависимости от его значения мы применяем разные классы к элементу.

Надеюсь, это поможет вам добавить класс к элементу в Next.js!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ Visual Studio Code Как лучше убрать тень у панели слева в VS Code? 1 ответ