React - одна из самых популярных библиотек для создания интерфейсных приложений. Его также можно использовать для создания мобильных приложений с React Native.
В этой статье мы рассмотрим, как различными способами отображать элементы условно.
Условно отображаемые элементы
Есть несколько способов условного отображения элементов в React. Мы можем использовать условные операторы, такие как операторы if и switch. Если мы переключаемся только между двумя элементами, мы также можем использовать троичные выражения.
Чтобы использовать тернарные выражения, мы можем написать для этого следующий код:
import React from "react";
export default function App() {
const [on, setOn] = React.useState(true);
return (
<div className="App">
<button onClick={() => setOn(on => !on)}>toggle</button>
{on ? <p>on</p> : <p>off</p>}
</div>
);
}
В приведенном выше коде у нас есть кнопка переключения, которая при нажатии переключает состояние on между true и false.
Если on равно true, выполняется рендеринг «включено». В противном случае мы выводим "off". Ниже приведено тернарное выражение, которое мы использовали для этого:
{on ? <p>on</p> : <p>off</p>}
Это замечательно, потому что нам не нужно писать if операторов, чтобы делать то же самое, а это намного дольше.
Это также выражение, что означает, что мы можем встроить его в наш код React, не создавая функции, в отличие от операторов if или switch.
Следовательно, это намного лучше, чем использование условных операторов, если мы отображаем только то или иное, основанное на каком-то условии.
Мы можем написать это еще короче, если мы ничего не будем отображать, если on равно false.
В этом случае мы можем просто использовать оператор &&, потому что он оценивает оба операнда, чтобы убедиться, что они оба правдивы. Если первый операнд ложный, он просто вернет false вместо оценки второго операнда.
Например, мы можем использовать его следующим образом:
import React from "react";
export default function App() {
const [on, setOn] = React.useState(true);
return (
<div className="App">
<button onClick={() => setOn(on => !on)}>toggle</button>
{on && <p>on</p>}
</div>
);
}
В приведенном выше коде, если on равно true, он оценит второй операнд, то есть <p>on</p>. В противном случае будет просто возвращено false.
Следовательно, когда on равно true, будет отображаться <p>on</p>.
Если у нас есть что-то более длинное, нам нужно написать полное условное выражение. Мы должны сделать это в отдельной функции или компоненте.
Например, если мы отображаем больше вещей на основе большего количества случаев, чем два, то нам нужно выписать их, как мы это делаем в следующем коде:
import React from "react";
const Fruit = ({ val }) => {
if (val === 0) {
return <p>apple</p>;
} else if (val === 1) {
return <p>orange</p>;
} else if (val === 2) {
return <p>grape</p>;
}
};
export default function App() {
const [num, setNum] = React.useState(0);
return (
<div className="App">
<button onClick={() => setNum(num => (num + 1) % 3)}>rotate</button>
<Fruit val={num} />
</div>
);
}
В приведенном выше коде у нас есть компонент Fruit, который представляет собой компонент без состояния, который возвращает имя фрукта и отображает его в элементе p на основе значения переданного свойства val.
Затем в нашем компоненте App у нас есть кнопка, которая вращается между числами, вызывая setNum, чтобы обновить число, вращая их между 0, 1 и 2.
Поэтому, когда мы нажимаем кнопку поворота, мы видим, что название фрукта вращается между «яблоком», «апельсином» и «виноградом».
Точно так же мы можем сделать то же самое с оператором switch следующим образом:
import React from "react";
const Fruit = ({ val }) => {
switch (val) {
case 0: {
return <p>apple</p>;
}
case 1: {
return <p>orange</p>;
}
case 2: {
return <p>grape</p>;
}
default: {
return undefined;
}
}
};
export default function App() {
const [num, setNum] = React.useState(0);
return (
<div className="App">
<button onClick={() => setNum(num => (num + 1) % 3)}>rotate</button>
<Fruit val={num} />
</div>
);
}
Приведенный выше код длиннее, поскольку мы должны указать default регистр, независимо от того, используется он или нет, только на тот случай, когда мы столкнемся с каким-то неожиданным значением.
Кроме того, мы использовали case блоков вместо case операторов, чтобы при необходимости мы могли определять переменные в области видимости блока с одинаковыми именами в каждом блоке, поэтому рекомендуется использовать их в любое время.
В итоге получаем тот же результат, что и раньше.
Если в нашем компоненте есть операторы if и switch, то лучше поместить их в отдельный компонент, поскольку они длинные.
Заключение
Есть много способов условного отображения вещей в компонентах React. Мы можем использовать тернарные выражения, если у нас есть 2 случая. Если мы хотим отобразить что-то условно, мы можем использовать оператор &&.
В противном случае мы должны поместить операторы if и switch в их собственный компонент, если они нам нужны.
Примечание команды Plain English
Вы знали, что у нас четыре публикации? Проявите немного любви, предложив им следующее: JavaScript на простом английском, AI на простом английском, UX на простом английском , Python на простом английском - спасибо и продолжайте учиться!
Мы также запустили YouTube и хотели бы, чтобы вы поддержали нас, подписавшись на наш канал Plain English.
И, как всегда, Plain English помогает продвигать хороший контент. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте электронное письмо по адресу [email protected] с вашим именем пользователя Medium и тем, о чем вы хотите написать, и мы вернуться к вам!
