JSX условный элемент в цикле

Question

Как определить открытие тега по условию и закрытие тега по другому. В следующем примере я пытаюсь обернуть каждые два элемента в новую строку. Однако, похоже, не работает. Образец - https://jsfiddle.net/reactjs/69z2wepo/

render() {
    let menuItems = [];
    for (var i = 0; i < 10; i++) {
        menuItems.push(
        {i%2 !== 0 ? <div class="row">:<>}
        <div>hi</div>
        {i%2 === 0 ? </div>:<>}
        );
    }
    return <div>{menuItems}</div>;
  }

Answer 1

Вам нужно изменить свою логику. Вы пытаетесь всегда вставить <div>, но вам нужно сохранить его в массиве <div> и отправить его только в нужное время.

render() {
    let menuItems = [];
    let hiDivs = []
    for (var i = 0; i < 10; i++) {
        hiDivs.push(<div>hi</div>)
        if(hiDivs.length === 2){
            menuItems.push(<div class="row">{hiDivs}</div>)
            hiDivs = []
        }
    }
    return <div>{menuItems}</div>;
}

Вы можете использовать dangerouslySetInnerHTML, но это очень, очень плохо и не рекомендуется ...

Answer 2

Создайте свои объекты данных перед рендерингом; это позволяет React отображать декларативным способом и достаточно гибко отображать столько строк или столбцов, сколько вы хотите добавить.

Также я специально оставил создание массива rows более подробным; нет причины, по которой вы не можете иметь переменную numRows, которая используется в цикле для добавления в массив rows.

https://codesandbox.io/s/clever-moser-3j51c

Компонентный

function App() {
  const cell = "hi";
  const rows = [
    [cell, cell],
    [cell, cell],
    [cell, cell],
    [cell, cell],
    [cell, cell]
  ];

  return rows.map((row, i) => {
    return (
      <div key={i} className="row">
        {row.map((data, j) => (
          <span key={j}>{data}</span>
        ))}
      </div>
    );
  });
}

выход

hi hi
hi hi
hi hi
hi hi
hi hi

Так как вы не предоставили CSS, я поменял ваши внутренние элементы <div> на <span>, так что вам решать, как это стилизовать.

Answer 3

Если желаемым выходом является просто то, что ниже, без других ограничений (то есть всегда два привета в каждой строке)

<div className="row">
   <div>hi</div>
   <div>hi</div>
</div> 
<div className="row">
   <div>hi</div>
   <div>hi</div>
</div>
..........

Вы можете сделать:

let menuItems = []
for(let i = 0 ; i < 5; i++){
  menuItems.push(<div className="row"><div>hi</div><div>hi<div></div>)
}

Answer 4

Как насчет этого?

  render() {
      let menuItems = [];
      for (var i = 0; i < 10; i++) {
          const hi = <div>hi</div>
          const item = i%2 === 0
              ? <div className="row">{hi}{hi}</div>
              : hi;
          menuItems.push(item);
      }
      return <div>{menuItems}</div>;
  }

Возможно, вы также захотите добавить атрибут «ключ», так как реагирование в противном случае выдаст предупреждение для массивов элементов.