Я пытаюсь отобразить компонент с помощью троичной операции. Я хочу показать компонент, если this.state.info и this.state.shortdef имеют длину больше 0. Как правильно это закодировать и почему? Вот мой код:
render (){
return (
<div>
<div>
{!(this.state.info && this.state.shortdef.length > 0) ? <addBook /> }
</div>
</div>
);
}
{(this.state.info.length > 0 && this.state.shortdef.length > 0 && <addBook />}
Если у вас нет второго варианта возврата, вам не нужен тернарный оператор. && отобразит компонент, если предыдущие утверждения верны.
В этом случае вам не нужен троичный оператор, вы можете использовать оператор &&, но небольшие предложения по вашему коду, компоненты всегда должны начинаться с прописной буквы, поэтому <AddBook /> и я лично перевели бы условие в константу, чтобы сделать рендеринг менее громоздким.
render (){
const hasNoBooks = !(this.state.info && this.state.shortdef.length > 0)
return (
<div>
<div>
{ hasNoBooks && <AddBook /> }
</div>
</div>
);
}
Если вы хотите показать компонент при определенном условии, выполните следующее:
{(this.state.info && this.state.shortdef.length > 0) && <addBook />}
Если вы хотите показать один компонент при определенном условии, а другой — при нарушении условия, используйте оператор ternary:
{(this.state.info && this.state.shortdef.length > 0) ? <addBook /> : <SomeOtherComponent />}
<AddBook />- person Jayce444 schedule 21.07.2020