Условное добавление атрибутов к 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} />;
Потенциальные проблемы и способы их решения
В любом случае могут встретиться проблемы:
- Синтаксические ошибки: Используйте раздельные выражения или функции для формирования атрибутов в сложных случаях.
- Нежелательное распространение пропсов: Как если бы мы случайно пустили белку в рюкзак, фильтруйте ненужные пропсы.
- Проблемы производительности: Если условия сложные, ищите способы упростить логику и переписывайте код, используйте мемоизацию для объектов атрибутов.
Полезные материалы
- Условная отрисовка – React – руководство по условной отрисовке в React.
- JSX в деталях – React – более глубокий взгляд на оператор распространения в JSX.
- Условная отрисовка в React: 9 методов с примерами – Блог LogRocket – разные подходы к условной отрисовке в React.
- React: Всё о пропсах по умолчанию | автор Чидуме Ннамди – подробно о пропсах по умолчанию.
- Условная отрисовка в React – использование оператора
&&
для условной отрисовки. - Объекты – руководство по управлению объектами в JavaScript.