Показать два компонента React в состоянии IF ELSE

Question

В приложении React. js У меня есть условие, если ложно, тогда показать два компонента, если ложь, показать третий компонент, но я не могу передать два компонента, если условие ложно.

{ !this.state.imageView ?
              (  <OneComponent/> && <TwoComponent/>)
                 : // else
                  <ThridComponent />
              }

Answer 1

Вам нужно обернуть два компонента одним элементом.

Если вам не нужен дополнительный элемент, например <div>, вы можете использовать для этого фрагмент:

{!this.state.imageView
  ? (
    <>
      <OneComponent/>
      <TwoComponent/>
    </>
  )
  : (
    <ThridComponent />
  )
}

Обратите внимание, что приведенный выше синтаксис <>...</> является сокращением для:

{!this.state.imageView
  ? (
    <React.Fragment>
      <OneComponent/>
      <TwoComponent/>
    </React.Fragment>
  )
  : (
    <ThridComponent />
  )
}

Подробнее о фрагментах можно прочитать здесь: https://reactjs.org/docs/fragments.html

Answer 2

JSX необходимо вернуть один элемент, чтобы вернуть несколько элементов, вам нужно обернуть его в Fragment, самый простой способ - обернуть ваши элементы в теги <> ... </>.

Изменить (<OneComponent/> && <TwoComponent/>) до <><OneComponent/> <TwoComponent/> </> и удалите &&

{ !this.state.imageView ?
    <>  <OneComponent/>  <TwoComponent/></>
    :
    <ThridComponent />
}