Как переключать css класс в React
год назад·2 мин. на чтение
В этой статье рассмотрим, как динамически переключать css классы в приложении React.
Переключение ccs классов
Чтобы переключить css класс, нам нужно использовать логическое значение, например, в тернарном выражении.- Если логическое значение
true
, имя класса добавляется к элементу react. - Если логическое значение
false
имя класса удаляется из элемента react.
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> ); }
Добавление имени класса к существующему имени класса
Вы также можете добавить новое имя класса к существующему имени класса следующим образом.Первоначальный вид html разметки:// 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> ); }
После нажатия кнопки<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>
Кастомный хук для диспатчинга Redux экшенов
2 года назад·1 мин. на чтение
В этой статье напишем кастомный хук для вызова action creator’а Redux вместе с dispatch() внутри.
Часто, вызывая action creator, мы забываем обернуть его в
Допустим, мы работаем над приложением списка задач, и у нас есть действие
В компоненте вызов будет выглядеть следующим образом.
dispatch()
, а вместо этого вызываем как обычная функцию. Таким образом action не доходит до редьюсера.
Мы создадим собственный хук, в котором будет выполняться обертывание вызова функции вaddProductToCart(product); // не верно dispatch(addProductToCart(product)); // верно
dispatch()
, чтобы мы могли отправлять наши экшены, вызывая их как обычные функции с уже встроенным диспатчингом.
Реализация довольно проста.import { useCallback } from 'react'; import { useDispatch } from 'react-redux'; export const useWithDispatch = (fn) => { const dispatch = useDispatch(); return useCallback( payload => () => dispatch(fn(payload)), [dispatch, fn] ) }
useWithDispatch
— это функция высшего порядка, поскольку она принимает функцию (action creator) в качестве аргумента и возвращает другую функцию, которая при вызове вызовет переданную функцию, обернутую с помощью dispatch()
. Обязательно запоминаем функцию обратного вызова с помощью useCallback
.
addTask()
, которое берет текст задачи и добавляет его в список задач:
// actions.js const addTaskAction = (text) => { return { type: 'ADD_TASK', payload: { id: 'some-id', text } } }
import { addTaskAction } from './actions'; export const Component = () => { const addTask = useWithDispatch(addTaskAction); const handleClick = () => { addTask('Learn Redux'); } // ... }
Итоги
Я надеюсь, что вы нашли этот пост полезным. Вам по-прежнему нужно помнить о передаче создателей действий (action creator) вuseWithDispatch
, но будет легче запомнить, что вы делаете это в самом начале, а не при их вызове.