Как визуализировать несколько компонентов с троичным оператором в JSX / React?

Question

Извините, если какая-то из моих терминов неверна, я не уверен, как это называется. Я видел, как некоторые люди деконструируют компоненты таким образом:

// instead of
return (
  <div>
    <Component />
  </div>
)

// they do this
const component = (
  <div>
    <Component />
  </div>
)

return (
  {component}
)

Мне это нравится, потому что это делает код более организованным, я не знаю точно, как вызывается этот метод, что делает его немного сложным для просмотра для ответов где-то еще. У меня вопрос, как я могу поместить несколько компонентов внутри троичного оператора на его пути? что-то вроде этого:

const component = (
  <div>
    <Component />
  </div>
)
const otherComponent = (
  <div>
    <OtherComponent />
  </div>
)

return (
  {this.state.conditional ? component otherComponent : ""}
)

Если я попытаюсь это сделать, приложение не будет скомпилировано, и ошибка: Ошибка синтаксического анализа: неожиданный токен, ожидается "}".

Я пробовал несколько вариантов например, оборачивать переменные в фигурные скобки, запятые или что-то еще, но, похоже, ничего не работает. Я уверен, что здесь что-то упущено.

Answer 1

Вы можете просто обернуть их во фрагмент, как это, и оно должно работать:

{this.state.conditional ? <>{component} {otherComponent}</> : ""}

У вас возникла проблема, потому что вы в основном пытаетесь вернуть две вещи из троичной. Это было бы как функция, выполняющая () => {return a; return b;}. Даже если бы это сработало, вы получите ошибку при рендеринге более одного реагирующего элемента.

Оборачивая его в один тег, похожий на фрагмент, вы говорите ему вернуть один элемент, состоящий из двух значений.