Как сделать active для разных компонентов?

В React, активация (active) компонента обычно достигается путем установки определенного состояния в компоненте. В данном ответе я рассмотрю два подхода:

1. Использование состояния (state) внутри компонента:

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

Пример реализации этого подхода:

import React, { useState } from 'react';

const MyComponent = () => {
  const [isActive, setActive] = useState(false);

  const toggleActive = () => {
    setActive(!isActive);
  };

  return (
    <div className={isActive ? 'active' : ''}>
      <button onClick={toggleActive}>Toggle Active</button>
    </div>
  );
};

В приведенном примере создан компонент MyComponent, который содержит состояние isActive, отслеживающее текущее состояние активности компонента. При нажатии на кнопку "Toggle Active", вызывается функция toggleActive, которая изменяет значение состояния isActive. Затем возвращаемый результат компонента содержит элемент div с классом "active", если компонент активен.

2. Использование props для передачи активности в компонент:

Второй подход заключается в передаче активности через пропсы (props) компонента. В этом случае родительский компонент явно устанавливает активность дочернего компонента.

Пример реализации этого подхода:

import React from 'react';

const MyComponent = ({ isActive }) => {
  return (
    <div className={isActive ? 'active' : ''}>
      <p>This is my component</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent isActive={true} />
    </div>
  );
};

В приведенном примере создан компонент MyComponent, который принимает пропс isActive. Родительский компонент App передает значение true в isActive пропс MyComponent, что делает компонент активным.

Оба подхода могут быть использованы для установки активности компонентов в React, в зависимости от ваших потребностей и структуры вашего приложения. Эти примеры демонстрируют базовые концепции, и вы можете адаптировать их к вашим собственным требованиям.