Как реализовать переключение между категориями в react?

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

Предположим, у нас есть список категорий, и когда пользователь нажимает на категорию, мы хотим отобразить соответствующий контент. Для этого мы можем использовать состояние, в котором будет храниться выбранная категория. Мы также можем использовать хук useState для управления состоянием в функциональном компоненте.

Вот пример кода, демонстрирующий, как реализовать переключение между категориями:

import React, { useState } from 'react';

const Categories = () => {
  const [selectedCategory, setSelectedCategory] = useState(null);

  const handleCategoryClick = (category) => {
    setSelectedCategory(category);
  };

  return (
    <div>
      <h2>Categories</h2>
      <ul>
        <li onClick={() => handleCategoryClick('Category 1')}>
          Category 1
        </li>
        <li onClick={() => handleCategoryClick('Category 2')}>
          Category 2
        </li>
        <li onClick={() => handleCategoryClick('Category 3')}>
          Category 3
        </li>
      </ul>
      <h2>Selected Category</h2>
      {selectedCategory ? (
        <p>{selectedCategory}</p>
      ) : (
        <p>No category selected</p>
      )}
    </div>
  );
};

export default Categories;

В этом примере мы создаем компонент Categories, внутри которого у нас есть состояние selectedCategory и функция handleCategoryClick, которая обновляет это состояние при клике на категорию.

В разметке мы рендерим список категорий, и при клике на каждую категорию вызывается функция handleCategoryClick с соответствующей категорией.

Затем мы выводим выбранную категорию, используя условный рендеринг. Если выбранная категория существует (не является null), мы отображаем ее значение, иначе выводим сообщение "No category selected".

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

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