В Next.js, популярной платформе React для создания приложений, отображаемых на стороне сервера, динамическая установка «активного» класса для элемента может улучшить взаимодействие с пользователем и обеспечить визуальную обратную связь. В этой статье мы рассмотрим несколько методов достижения этой функциональности с помощью Next.js, а также примеры кода.

1. Метод 1: Управление состоянием с помощью хука useState
   Хук useState позволяет нам создавать и управлять состоянием внутри функционального компонента. Мы можем использовать его для отслеживания состояния активного класса и обновления его по щелчку мыши. Вот пример:

import React, { useState } from 'react';
const MyComponent = () => {
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive(!isActive);
  };
  return (
    <button className={isActive ? 'active' : ''} onClick={handleClick}>
      Click me
    </button>
  );
};
export default MyComponent;

2. Метод 2: компонент на основе классов с состоянием
   Если вы предпочитаете использовать компоненты на основе классов, вы можете добиться того же результата, расширив класс React.Component и управляя состоянием. Вот пример:

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false,
    };
  }
  handleClick = () => {
    this.setState({ isActive: !this.state.isActive });
  };
  render() {
    return (
      <button className={this.state.isActive ? 'active' : ''} onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
export default MyComponent;

3. Метод 3: активный класс на основе URL-адреса.
   Если вам нужно установить «активный» класс на основе текущего URL-адреса, вы можете использовать перехватчик useRouter в Next.js для доступа к информации о маршрутизации. Вот пример:

import React from 'react';
import { useRouter } from 'next/router';
const MyComponent = () => {
  const router = useRouter();
  return (
    <ul>
      <li className={router.pathname === '/home' ? 'active' : ''}>Home</li>
      <li className={router.pathname === '/about' ? 'active' : ''}>About</li>
      <li className={router.pathname === '/contact' ? 'active' : ''}>Contact</li>
    </ul>
  );
};
export default MyComponent;

В этой статье мы рассмотрели несколько методов динамической установки «активного» класса в Next.js. Мы рассмотрели использование перехватчика useState для управления состоянием, компонентов на основе классов и назначения активного класса на основе URL-адреса с помощью перехватчика useRouter. Эти методы помогут вам улучшить взаимодействие с пользователем и обеспечить визуальную обратную связь в ваших приложениях Next.js.

Не забудьте выбрать метод, который лучше всего соответствует требованиям и стилю разработки вашего проекта. Приятного кодирования!