Различные методы и лучшие практики использования условных атрибутов или свойств с React
Сегодня условные атрибуты широко используются в React для обеспечения динамического поведения. Но большинство разработчиков не знают обо всех методах, которые можно использовать для их реализации.
Итак, в этой статье я рассмотрю различные методы и лучшие практики использования условных атрибутов или свойств с React.
Отрисовка условных атрибутов в React
Прежде чем перейти к реализации, мы должны понять, как базовая архитектура React отображает условные атрибуты.
В JavaScript установка для атрибута значения false приведет к удалению этого конкретного атрибута из DOM. Если мы установим для атрибута значение null, undefined, или false,, этот атрибут будет удален из модели DOM.
Например, если мы установим для атрибута значение null, undefined, или false,, этот атрибут будет удален из модели DOM.
const required = true; const disabled = false;return <input type="text" disabled={required} required={disabled}/>;
Приведенный выше код принимает 2 реквизита для входного тега, и поскольку обязательный атрибут имеет значение false, он будет опущен при рендеринге компонента.
<input type="text" disabled>
Теперь давайте рассмотрим различные подходы к реализации условных атрибутов в приложении React.
если заявление
Использование операторов if-else - один из самых простых способов реализации условных атрибутов. Это довольно просто и читабельно.
Рассмотрим следующий пример, где поле ввода отключено для пользователей с ролью ‘Student’. Роль будет проверяться из объекта пользователя, и элемент ввода будет соответствующим образом обработан.
Но этот подход не подходит, если у нас есть несколько атрибутов, поскольку мы должны создавать переменные для каждого атрибута.
Кроме того, длина кода продолжает расти с увеличением числа переменных и условий.
Тернарный оператор
Тернарный оператор - это встроенный условный оператор, который принимает три аргумента. Это позволяет нам заключить наши условия в одну строку, где первым аргументом будет условие. Остальные аргументы будут выполняться соответственно, если условие истинно или ложно.
Хотя этот подход уменьшает количество строк кода, он также может снизить удобочитаемость при увеличении количества атрибутов.
&& Оператор
Использование оператора && очень похоже на предыдущий тернарный подход. && - это логический оператор, который разрешает условие с левой стороны и вывод с правой стороны. Вывод будет выполнен, если условие истинно, иначе вывод станет ложным.
Использование && более компактно, чем тернарный оператор. Он также менее сложен по сравнению с подходом с тройным оператором.
Оператор распространения
Этот метод - один из моих любимых, когда дело касается условных реквизитов.
Оператор Spread используется при передаче всех свойств объекта или всех элементов массива компоненту React.
Здесь я использовал объект атрибутов для хранения всех необходимых атрибутов поля ввода. Это значительно упрощает обработку кода, поскольку все атрибуты будут обрабатываться внутри объекта.
Представьте, что вы используете наш первый подход с оператором if для этого сценария,
Теперь нас завалили переменными, и обработка кода будет утомительной задачей. Однако использование встроенных операторов все равно ухудшит ситуацию по сравнению с оператором распространения.
Так что иногда вы можете даже закончить спагетти!
Создавайте лучшие библиотеки компонентов и системы проектирования
Делитесь компонентами между командами и проектами, чтобы ускорить разработку и убедиться, что ваши пользователи видят единообразный дизайн в каждой точке взаимодействия.
Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания, совместного использования и внедрения компонентов в разных командах и приложениях. Создайте центр компонентов бесплатно попробуйте →
Заключительные слова
В этой статье обсуждались четыре основных подхода к добавлению условных атрибутов или свойств в компоненты React. Вы можете использовать любой из методов в зависимости от ваших предпочтений. Но сначала мы должны рассмотреть наши требования.
Использование операторов if - самый простой подход, если вы не хотите возиться с более сложным синтаксисом JavaScript. Если сложность кода и удобочитаемость вас не беспокоят, вы можете использовать обычное «если».
Встроенные тернарные операторы и && полезны, если вы имеете дело с меньшим количеством атрибутов.
Наконец, оператор спреда обладает большей гибкостью по сравнению с другими подходами. Когда дело касается условного рендеринга, я бы предпочел оператор спреда. Что твое?
Спасибо за чтение !!!
