Как переключать css класс в React

Переключение ccs классов

Чтобы переключить css класс, нам нужно использовать логическое значение, например, в тернарном выражении.

• Если логическое значение true, имя класса добавляется к элементу react.
• Если логическое значение false имя класса удаляется из элемента react.

Ниже приведен пример, в котором используются React хуки, которые добавляют css класс app в элемент div, когда мы нажимаем кнопку Toggle class. Если мы нажмем эту кнопку еще раз, имя класса будет удалено из элемента div.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : null}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

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

// App.js

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  state = { isActive: false };

  handleToggle = () => {
    this.setState({ isActive: !this.state.isActive });
  };

  render() {
    const isActive = this.state.isActive;
    return (
      <div className={isActive ? "app" : null}>
        <h1>Hello react</h1>
        <button onClick={this.handleToggle}>Toggle class</button>
      </div>
    );
  }
}

export default App;

Переключение между двумя именами классов

Вместо того, чтобы добавлять или удалять имя класса, мы также можем переключаться между двумя именами классов в приложении React. В приведенном ниже примере по умолчанию класс container добавляется в элемент div, когда мы нажимаем кнопку Toggle class класс container удаляется, а класс app добавляется к элементу.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "app" : "container"}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Добавление имени класса к существующему имени класса

Вы также можете добавить новое имя класса к существующему имени класса следующим образом.

// App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState(false);

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div className={`app ${isActive ? "danger" : ""}`}>
      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

Первоначальный вид html разметки:

<div class="app">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>

После нажатия кнопки Toggle class html выглядит следующим образом.

<div class="app danger">
   <h1>Hello react</h1>
   <button>Toggle class</button>
</div>

Одна из самых важных возможностей React - это создание динамических списков, которые могут автоматически обновляться при изменении данных. В этой статье мы рассмотрим, как создавать динамические списки в React с использованием функциональных компонентов. Функциональные компоненты - это новый подход к созданию компонентов в React, который позволяет писать более простой и понятный код. Для начала нам понадобится создать новый функциональный компонент, который будет отображать список элементов. Давайте назовем его ListComponent:

import React from 'react';

const ListComponent = () => {
  const items = ['item 1', 'item 2', 'item 3'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default ListComponent;

В этом примере мы создали массив items, содержащий несколько элементов списка. Затем мы используем метод map для преобразования каждого элемента в соответствующий элемент списка. Обратите внимание на использование атрибута key - это важно для оптимизации производительности React. Теперь мы можем использовать наш компонент ListComponent в других компонентах:

import React from 'react';
import ListComponent from './ListComponent';

const App = () => {
  return (
    <div>
      <h1>Мой динамический список</h1>
      <ListComponent />
    </div>
  );
};

export default App;

Теперь, когда мы запустим наше приложение, мы увидим список элементов, которые мы определили в компоненте ListComponent.

Однако, чтобы наш список был действительно динамическим, нам нужно иметь возможность добавлять и удалять элементы. Давайте добавим эту функциональность в наш компонент.

import React, { useState } from 'react';

const ListComponent = () => {
  const [items, setItems] = useState(['item 1', 'item 2', 'item 3']);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    setItems([...items, newItem]);
    setNewItem('');
  };

  const removeItem = (index) => {
    const updatedItems = items.filter((item, i) => i !== index);
    setItems(updatedItems);
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>Удалить</button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
      />
      <button onClick={addItem}>Добавить</button>
    </div>
  );
};

export default ListComponent;

В этом обновленном примере мы добавили два новых состояния: newItem и setNewItem. newItem - это значение нового элемента, который пользователь вводит в поле ввода, а setNewItem - это функция для обновления значения newItem. Мы также добавили две новые функции: addItem и removeItem. Функция addItem добавляет новый элемент в массив items, используя синтаксис расширения массива [...items, newItem], а затем сбрасывает значение newItem. Функция removeItem использует метод filter для удаления элемента из массива items. Теперь, когда мы запустим наше приложение, у нас будет возможность добавлять и удалять элементы из списка. Это пример простого компонента списка в React с использованием функциональных компонентов. Вы можете дополнить его дополнительными функциями и стилями, чтобы сделать его более интерактивным и привлекательным для пользователей. В заключение, создание динамических списков в React с помощью функциональных компонентов - это очень мощный инструмент для создания интерактивных пользовательских интерфейсов. Надеюсь, эта статья была полезной для вас, особенно если вы новичок в React. Удачи в изучении React!