Условное добавление атрибутов к React-компонентам

Быстрый ответ

Для того чтобы условно добавить атрибуты в компоненты React, используйте объект с атрибутами и примените к нему оператор распространения:

<input {...(условие ? { readOnly: true } : {})} />

Если вам требуется управление несколькими условиями, можно составить объект атрибутов и развернуть его в элемент:

const attrs = {};
if (условие1) attrs.readOnly = true;
if (условие2) attrs.disabled = true;

<input {...attrs} />

Тернарные операторы и логический оператор && подойдут для упрощённого условного добавления, а объекты подходят для управления многочисленными и сложными условиями.

Рассматриваем оператор распространения и условные выражения

Поговорим о таких инструментах, как оператор распространения и условные выражения.

Оператор распространения в JSX

Оператор распространения (...) в JSX позволяет "раскладывать" объект со свойствами там, где это предполагается — подобно распределению вещей из чемодана по шкафам.

// Готовимся к вечеринке 👔💼
const partyProps = условие ? { type: 'text', size: 20 } : {};
<input {...partyProps} />

Подробнее об этом расскажет наш спикер на видео

Логический оператор && для коротких условных выражений

Оператор && удобен для использования в коротких условных выражениях: если левая часть является истинной, то будет выполнена и правая.

// Возьми паспорт, если у тебя он есть
<div {...(gotPassport && { tabIndex: 0 })} />

Работаем с ложными атрибутами

В React атрибуты с ложными значениями не добавляются, что упрощает написание кода на JSX.

// Пустые бутылки с собой не разрешается брать!
<div {...({ emptyBottle: false })} /> // emptyBottle не добавится

Читаемость кода – это как проверка маршрута

При написании кода важно уделять внимание его читаемости, иначе код на JSX становится сложным для восприятия, как и маршрут с множеством отметок.

// Проверяем расписание заранее
let inputAttributes = {};
if (isRequired) inputAttributes.required = 'required';
if (isReadOnly) inputAttributes.readOnly = 'readOnly';

// Проверить маршрут?
return <input {...inputAttributes} />;

Визуализация

Выбор атрибутов для React компонента похож на выбор билетов в кино 🍿.

Вот примеры:

Без условий:

<Movie tickets popcorn cola iceCream />

Получаем полный набор, даже если мы не голодны.

С условиями (если голодны):

<Movie tickets popcorn {...(hungry && { cola, iceCream })} />

Если hungry истина — вы получите дополнительные напитки и мороженое. Если ложь — останемся только с попкорном.

Продвинутый уровень управления условными атрибутами

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

Управление динамическими атрибутами, полученными от сервера

// Получаем данные о месте назначения
function useDynamicAttributes(url) {
  const [attributes, setAttributes] = useState({});

  useEffect(() => {
    fetch(url).then(response => response.json()).then(data => {
      if (data.userCanEdit) setAttributes({readOnly: false});
      if (data.isRequired) setAttributes(attrs => ({ ...attrs, required: true }));
    });
  }, [url]);

  return attributes;
}

// Обрабатываем данные
const dynamicAttrs = useDynamicAttributes('/api/attributes');
<input {...dynamicAttrs} />

Применяем деструктуризацию для более удобного управления атрибутами

Деструктуризация помогает исключить нежелательные атрибуты.

const { notNeeded, ...necessaryProps } = props;
return <Component {...necessaryProps} />;

Заранее готовим набор свойств перед передачей их компоненту

Составляем объект свойств заранее.

// Умная упаковка
let props = { onClick: () => console.log('Clicked! Nice job!'), tabIndex: 0 };
if (условие) {
  props = { ...props, role: 'button' };
}
// В путь!
return <div {...props} />;

Потенциальные проблемы и способы их решения

В любом случае могут встретиться проблемы:

• Синтаксические ошибки: Используйте раздельные выражения или функции для формирования атрибутов в сложных случаях.
• Нежелательное распространение пропсов: Как если бы мы случайно пустили белку в рюкзак, фильтруйте ненужные пропсы.
• Проблемы производительности: Если условия сложные, ищите способы упростить логику и переписывайте код, используйте мемоизацию для объектов атрибутов.

Полезные материалы

1. Условная отрисовка – React – руководство по условной отрисовке в React.
2. JSX в деталях – React – более глубокий взгляд на оператор распространения в JSX.
3. Условная отрисовка в React: 9 методов с примерами – Блог LogRocket – разные подходы к условной отрисовке в React.
4. React: Всё о пропсах по умолчанию | автор Чидуме Ннамди – подробно о пропсах по умолчанию.
5. Условная отрисовка в React – использование оператора && для условной отрисовки.
6. Объекты – руководство по управлению объектами в JavaScript.