Условный рендеринг в React

Как динамически выводить что-то против чего-то еще в React

В JSX-компоненте React вы можете динамически решить выводить тот или иной компонент или только некоторую часть JSX на основе условных выражений.

Самый распространенный способ - это, вероятно, тернарный оператор:

const Pet = (props) => {
  return (
    {props.isDog ? <Dog /> : <Cat />}
  )
}

Другой способ, который отлично работает, когда у вас концептуально естьifно неelseиспользовать&&оператор, который работает следующим образом: если выражение до него оценивается как истина, он печатает выражение после него:

const Pet = (props) => {
  return (
    {props.isDog && <Dog />}
    {props.isCat && <Cat />}
  )
}

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: