Выражения в JSX
Вместо
const sampleComponent = () => {
return isTrue ? <p>True!</p> : <none/>
};
Используйте более короткую запись
const sampleComponent = () => {
return isTrue && <p>True!</p>
};
Для более сложных сценариев со слишком большим количеством тернарных операторов:
// Слишком много тернаных операторов??? :-/
const sampleComponent = () => {
return (
<div>
{flag && flag2 && !flag3
? flag4
? <p>Blah</p>
: flag5
? <p>Meh</p>
: <p>Herp</p>
: <p>Derp</p>
}
</div>
)
};
Лучший подход: переместить логику в компоненты
Альтернативный хакерский подход: используйте IIFE
Есть несколько библиотек, которые решают эту проблему (JSX-Control Statement), но вместо того, чтобы вводить другую зависимость, используйте IIFE и возвращайте значения, используя инструкцию if-else внутри
const sampleComponent = () => {
return (
<div>
{
(() => {
if (flag && flag2 && !flag3) {
if (flag4) {
return <p>Blah</p>
} else if (flag5) {
return <p>Meh</p>
} else {
return <p>Herp</p>
}
} else {
return <p>Derp</p>
}
})()
}
</div>
)
};
С подходящим транспайлером вы можете воспользоваться текущий выражением do, которое в настоящее время находится в stage-1
const sampleComponent = () => {
return (
<div>
{
do => {
if (flag && flag2 && !flag3) {
if (flag4) {
<p>Blah</p>
} else if (flag5) {
<p>Meh</p>
} else {
<p>Herp</p>
}
} else {
<p>Derp</p>
}
}
}
</div>
)
};
Или как альтернативный вариант, использовать returns:
const sampleComponent = () => {
const basicCondition = flag && flag2 && !flag3;
if (!basicCondition) return <p>Derp</p>;
if (flag4) return <p>Blah</p>;
if (flag5) return <p>Meh</p>;
return <p>Herp</p>
}