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

Метод 1: useState Hook

import React, { useState } from 'react';
const ToggleButton = () => {
  const [isToggled, setToggled] = useState(false);
  const handleClick = () => {
    setToggled(!isToggled);
  };
  return (
    <div>
      <button onClick={handleClick}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
};

Метод 2: Компонент класса с setState

import React, { Component } from 'react';
class ToggleButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggled: false,
    };
  }
  handleClick = () => {
    this.setState((prevState) => ({
      isToggled: !prevState.isToggled,
    }));
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isToggled ? 'ON' : 'OFF'}
        </button>
      </div>
    );
  }
}

Метод 3: useReducer Hook

import React, { useReducer } from 'react';
const initialState = {
  isToggled: false,
};
const reducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE':
      return { ...state, isToggled: !state.isToggled };
    default:
      return state;
  }
};
const ToggleButton = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const handleClick = () => {
    dispatch({ type: 'TOGGLE' });
  };
  return (
    <div>
      <button onClick={handleClick}>
        {state.isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
};

Метод 4: Компонент высшего порядка (HOC)

import React, { useState } from 'react';
const withToggle = (WrappedComponent) => {
  const ToggleWrapper = (props) => {
    const [isToggled, setToggled] = useState(false);
    const handleClick = () => {
      setToggled(!isToggled);
    };
    return (
      <div>
        <button onClick={handleClick}>
          {isToggled ? 'ON' : 'OFF'}
        </button>
        <WrappedComponent {...props} isToggled={isToggled} />
      </div>
    );
  };
  return ToggleWrapper;
};
const MyComponent = ({ isToggled }) => {
  return (
    <div>
      {isToggled ? <h1>Toggle is ON</h1> : <h1>Toggle is OFF</h1>}
    </div>
  );
};
const ToggleButton = withToggle(MyComponent);

Метод 5: Контекстный API

import React, { createContext, useContext, useState } from 'react';
const ToggleContext = createContext();
const ToggleProvider = ({ children }) => {
  const [isToggled, setToggled] = useState(false);
  const toggle = () => {
    setToggled(!isToggled);
  };
  return (
    <ToggleContext.Provider value={{ isToggled, toggle }}>
      {children}
    </ToggleContext.Provider>
  );
};
const ToggleButton = () => {
  const { isToggled, toggle } = useContext(ToggleContext);
  return (
    <div>
      <button onClick={toggle}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
};
// Wrap your app with ToggleProvider

Метод 6: Redux

// Install and set up Redux in your project
// actions.js
export const toggle = () => ({
  type: 'TOGGLE',
});
// reducer.js
const initialState = {
  isToggled: false,
};
const toggleReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE':
      return { ...state, isToggled: !state.isToggled };
    default:
      return state;
  }
};
export default toggleReducer;
// ToggleButton.js
import React from 'react';
import {toggle } from './actions';
import { connect } from 'react-redux';
const ToggleButton = ({ isToggled, toggle }) => {
  return (
    <div>
      <button onClick={toggle}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
};
const mapStateToProps = (state) => ({
  isToggled: state.isToggled,
});
const mapDispatchToProps = {
  toggle,
};
export default connect(mapStateToProps, mapDispatchToProps)(ToggleButton);

Метод 7: React Query

// Install and set up React Query in your project
import React, { useState } from 'react';
import { useMutation } from 'react-query';
const ToggleButton = () => {
  const [isToggled, setToggled] = useState(false);
  const toggleMutation = useMutation(() => {
    setToggled(!isToggled);
  });
  const handleClick = () => {
    toggleMutation.mutate();
  };
  return (
    <div>
      <button onClick={handleClick}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
};

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