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

Метод 1: встроенный условный рендеринг

function App() {
  const backgroundColor = condition ? 'red' : 'blue';
  return (
    <div style={{ background: backgroundColor }}>
      {/* Your component content */}
    </div>
  );
}

Метод 2: CSS-классы и тернарный оператор

function App() {
  const className = condition ? 'red-bg' : 'blue-bg';
  return (
    <div className={className}>
      {/* Your component content */}
    </div>
  );
}
// CSS
.red-bg {
  background: red;
}
.blue-bg {
  background: blue;
}

Метод 3: сопоставление объектов

function App() {
  const backgroundColors = {
    option1: 'red',
    option2: 'blue',
  };
  const selectedOption = 'option1';
  const selectedBackgroundColor = backgroundColors[selectedOption];
  return (
    <div style={{ background: selectedBackgroundColor }}>
      {/* Your component content */}
    </div>
  );
}

Метод 4: CSS-модули

import styles from './App.module.css';
function App() {
  const className = condition ? styles.red : styles.blue;
  return (
    <div className={className}>
      {/* Your component content */}
    </div>
  );
}
// App.module.css
.red {
  background: red;
}
.blue {
  background: blue;
}

Метод 5. Динамические библиотеки CSS-in-JS (например, стилизованные компоненты)

import styled from 'styled-components';
const StyledDiv = styled.div`
  background: ${props => props.condition ? 'red' : 'blue'};
`;
function App() {
  return (
    <StyledDiv condition={condition}>
      {/* Your component content */}
    </StyledDiv>
  );
}

Метод 6: использование переменных CSS

function App() {
  const style = {
    '--background-color': condition ? 'red' : 'blue',
  };
  return (
    <div style={style}>
      {/* Your component content */}
    </div>
  );
}
// CSS
div {
  background: var(--background-color);
}

Метод 7: собственный крючок

import { useEffect, useState } from 'react';
function useBackgroundSwitch(condition) {
  const [backgroundColor, setBackgroundColor] = useState('');
  useEffect(() => {
    setBackgroundColor(condition ? 'red' : 'blue');
  }, [condition]);
  return backgroundColor;
}
function App() {
  const condition = true;
  const backgroundColor = useBackgroundSwitch(condition);
  return (
    <div style={{ background: backgroundColor }}>
      {/* Your component content */}
    </div>
  );
}

Используя различные методы, такие как встроенный условный рендеринг, классы CSS, сопоставление объектов, модули CSS, динамические библиотеки CSS-in-JS, переменные CSS и пользовательские перехватчики, вы можете легко динамически переключать стили фона в React. Поэкспериментируйте с этими методами, чтобы создать визуально привлекательные и интерактивные пользовательские интерфейсы.