Несколько if / else в JSX

Question

Я пытаюсь увеличить переменную в map() в jsx и скрыть на ней элементы базы. Я получаю следующую ошибку

Не удалось скомпилировать.
Ошибка синтаксического анализа: смежные элементы JSX должны быть заключены в тег. Вы хотели фрагмент JSX <> ...?

Я думаю, что эта строка мне мешает

{myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className="">}

Есть идеи? (Я не полный рабочий день разработчика React, поэтому немного потерян в jsx)

Вот полный код этой части

{props.config.map(row => (
  (row.isRequired || props.data[row.key]) && 
     <React.Fragment>
        {row.isFullWidth ? 
          <div data-key-id={row.key} key={row.key} className="">
            <div className="">
              <div className="">some key</div>
                <div className="">some value</div>
            </div>
          </div>
         :
          <React.Fragment>
            {myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className="">}
              <div className="">
                <div className="">{row.key}:</div>
                <div className="">{row.value}</div>
              </div>
            {myIncrement % 2 == 0 && </div>}

            {myIncrement = !row.isFullWidth ? myIncrement + 1 : myIncrement}
          </React.Fragment>
         }
      </React.Fragment>
))}

Answer 1

Что вы не можете сделать:

  <React.Fragment>
    {myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className="">} // <= opening tag
      <div className="">
        <div className="">{row.key}:</div>
        <div className="">{row.value}</div>
      </div>
    {myIncrement % 2 == 0 && </div>} // <= Enclosing tag

    {myIncrement = !row.isFullWidth ? myIncrement + 1 : myIncrement}
  </React.Fragment>

Это набрано значение, потому что вы пытаетесь отобразить открывающий тег <div>, а затем в другом выражении тег </div>. Они должны принадлежать друг другу как:

  <React.Fragment>
    {myIncrement % 2 == 0 ? (
      <div data-key-id={row.key} key={row.key} className="">
        <div className=""> // <= could be a new component 
          <div className="">{row.key}:</div>
          <div className="">{row.value}</div>
        </div>
      </div>
    )
    : (
      <div className=""> // <= could be a new component
        <div className="">{row.key}:</div>
        <div className="">{row.value}</div>
      </div>
    )
  }

    {myIncrement = !row.isFullWidth ? myIncrement + 1 : myIncrement}
  </React.Fragment>

Answer 2

Первая проблема: пропущенные фрагменты вокруг карты

В принципе, у вас не может быть jsx, похожего на

<foo/>
<bar/>

, потому что React не может знать элемент root и ему нужны которые делают React magi c, который превращает JSX в реактивный HTML, вместо этого вам нужно иметь

<>
  <foo/>
  <bar/>
</>

_{<> - сокращение от <React.Fragment>}

Вот что означает сообщение об ошибке о соседних элементах. Ваша карта создаст смежные элементы:

['a', 'b', 'c'].map(letter => <div>{letter}</div>)

will produce

<div>a</div>
<div>b</div>
<div>c</div>

Чтобы исправить эту ошибку, просто добавьте фрагмент вокруг вашей карты:

<>
  { props.config.map(row => (
    /* ... */
  )}
</>

Вторая проблема: неверный синтаксис JSX

Это недопустимый JSX:

{ myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className=""> }
  <div className="">
    <div className="">{row.key}:</div>
    <div className="">{row.value}</div>
  </div>
{myIncrement % 2 == 0 && </div>}

Я знаю это имеет смысл во время записи, но не компилируется, потому что React попытается оценить myIncrement % 2 == 0 && <div data-key-id={row.key} key={row.key} className=""> и myIncrement % 2 == 0 && </div> отдельно и это невозможно (пока?).

Вы можете получить что-то похожее следующим образом:

// define this part of the component somewhere
const Foo = ({ key, value}) => (
  <div>
    <div>{key}:</div>
    <div>{value}</div>
  </div>
);

// surround it or not by a div, depending on the increment value
{ myIncrement % 2 == 0 ? (
    <div data-key-id={row.key} key={row.key}>
      <Foo key={row.key} value={row.value}/>
    </div>
  ) : (
    <Foo key={row.key} value={row.value}/>
  )
}