Frontender Libs - обзор библиотек JS / CSS

Декларативная условная стилизация

Для условного применения inline-стилей в React часто создают объект стилей с помощью if или тернарных операторов. Существует более лаконичный, декларативный подход с использованием spread-оператора (...) и логического оператора &&.

Механизм основан на том, что выражение условие && { стиль: 'значение' } вернет либо объект стилей, если условие истинно, либо false, если ложно. React при разворачивании (spread) falsy-значений (таких как false, null или undefined) внутри объекта просто игнорирует их, не добавляя никаких свойств.

import React from 'react';

function AlertMessage({ text, isActive, isUrgent }) {
  const baseStyles = {
    margin: '10px 0',
    padding: '15px',
    borderRadius: '4px',
    transition: 'all 0.2s ease-in-out',
  };

  const finalStyles = {
    ...baseStyles,
    ...(isActive && { background: '#f0f0f0' }),
    ...(isUrgent && { background: '#ffdddd', border: '1px solid red' }),
  };

  return <div style={finalStyles}>{text}</div>;
}

👉 @sWebDev

👍5

www.tgoop.com/sWebDev/4041

662 viewsSep 15 at 07:43

Декларативная условная стилизация

Для условного применения inline-стилей в React часто создают объект стилей с помощью if или тернарных операторов. Существует более лаконичный, декларативный подход с использованием spread-оператора (...) и логического оператора &&.

Механизм основан на том, что выражение условие && { стиль: 'значение' } вернет либо объект стилей, если условие истинно, либо false, если ложно. React при разворачивании (spread) falsy-значений (таких как false, null или undefined) внутри объекта просто игнорирует их, не добавляя никаких свойств.

import React from 'react';

function AlertMessage({ text, isActive, isUrgent }) {
  const baseStyles = {
    margin: '10px 0',
    padding: '15px',
    borderRadius: '4px',
    transition: 'all 0.2s ease-in-out',
  };

  const finalStyles = {
    ...baseStyles,
    ...(isActive && { background: '#f0f0f0' }),
    ...(isUrgent && { background: '#ffdddd', border: '1px solid red' }),
  };

  return <div style={finalStyles}>{text}</div>;
}

BY Frontender Libs - обзор библиотек JS / CSS