В React часто необходимо добавлять атрибуты условно. В React это довольно просто.
React достаточно сложен, чтобы пропустить некоторые свойства, если введенное вами значение не соответствует действительности. Это полезно, в основном, при условном добавлении многочисленных характеристик. Этот пост научит нас, как условно добавлять атрибуты к компонентам React.
React часто использует условные свойства, чтобы предложить динамическое поведение. Однако большинство разработчиков не знакомы со всеми доступными методами реализации. В Bosc Tech есть команда опытных разработчиков React по найму, которые могут преданно работать на вас. Они знакомы со всеми проблемами React и знают, как легко их решить. Наймите их для вашего следующего проекта развития.
Поэтому в этой статье будут рассмотрены многие подходы и рекомендуемые практики использования условных атрибутов или свойств с React. Кроме того, ознакомьтесь с лучшими практиками для реагирующих хуков.
var condition = true;
вар реквизит = {
значение: «фу»,
…( условие && { disabled: true } )
};
var component = ‹div {…props} /›;
Или его встроенная версия
var condition = true;
переменная компонента = (
‹дел
значение = «фу»
{ …( условие && { отключено: true } ) } /›
);
Рендеринг условных атрибутов в React
Мы должны понять, как фундаментальная архитектура React отображает условные атрибуты, прежде чем переходить к реализации. Более того, мы предлагаем вам пройтись по теме переделка компонента.
Когда атрибуту в JavaScript присваивается ложное значение, DOM больше не будет включать этот конкретный атрибут. Атрибут будет удален из DOM, если для него установлено значение null, undefined или false.
Пример
const required = true;
const disabled = false;
return ‹input type="text" disabled={required} required={disabled}/›;
если Заявление
Добавление встроенных условных выражений внутри может быть приемлемым, если есть только одно или два свойства. Однако, если компонента React слишком много, он может стать громоздким и трудным для чтения.
Логин.js
импортировать React из «реагировать»;
const Логин= props =› {
пусть { isLoggedIn } = реквизит;
if (isLoggedIn) {
возврат ‹button›Выйти‹/button›;
} еще {
возврат ‹кнопка›Войти‹/кнопка›;
}
};
экспортировать Логин по умолчанию;‹/pre›
‹strong›App.js‹/strong›
‹pre class=”EnlighterJSRAW” data-enlighter-language="generic"›
импортировать React, {Компонент} из «реагировать»;
импортировать ‘./App.css’;
импортировать логин из «./Login»;
класс Приложение расширяет Компонент {
конструктор (реквизит) {
супер (реквизит);
это.state = {
isLoggedIn: true
};
}
оказывать() {
возврат (
‹div className="Приложение"›
<h1>
Добро пожаловать в BOSC Tech Labs Private Limited
</h1>
‹Логин isLoggedIn={isLoggedIn} /›
‹/дел›
);
}
}
Тернарный оператор
Тернарный оператор — это встроенный условный оператор с тремя аргументами. Это позволяет нам сжать наши условия в одну строку с условием в качестве первого аргумента. Другие аргументы будут выполняться по очереди, если условие истинно или ложно.
состояние ? exprIfTrue : exprIfFalse
Пример
импортировать React из «реагировать»;
функция экспорта по умолчанию App() {
const Цветы = [
{имя: «Роза»},
{название: "Орхидея"},
{название: 'Гиацинт'},
{имя: «Лили»},
{название: 'Тюльпан'},
]
const FlowersList = true
возврат (
‹див›
{
Список цветов ? (
‹див›
<ul>
{Flowers.map(Цветок =›
‹li›{Flower.name}‹/li›)}
</ul>
‹/дел›
: (
‹p›Без цветов‹/p›
)
}
Заключение
В этой статье были рассмотрены различные методы добавления условных атрибутов или реквизитов в компоненты React. В зависимости от ваших предпочтений, вы можете использовать любую из техник. Но прежде всего давайте подумаем о том, что нам нужно.
Если вы не хотите иметь дело с более сложным синтаксисом JavaScript, использование операторов «если» — самое простое решение.
Вы можете продолжать использовать традиционное «если», если сложность и читабельность кода не являются проблемой.
