Создать таблицу из 2 столбцов из массива в JSX

Question

Я пытаюсь сгенерировать 2 столбца в каждой строке таблицы из массива в JSX.В Javascript это было бы просто, но JSX нужен открывающий и закрывающий тег в одной и той же области.

Это то, что я бы сделал в Javascript:

var tTable = '<table>';

var newArray = ['2', '3', '4', '5', '6'];
var newTr = '';

for (var i = 0; i < newArray.length; i++) {
  if (i % 2 == 0) {
    newTr += (i > 0) ? '</tr><tr>' : '<tr>'
  }

  newTr += '<td>' + newArray[i] + '</td>';
}

newTr += '</tr>';
tTable += newTr + '</table>';
document.write(tTable);

Это создаст массив следующим образом:

2 3
4 5
6 

Answer 1

Это должно помочь:

showTable() {
    const tableRows = [];
    for (let i = 0; i < newArray.length; i = i + 2) {
          tableRows.push(
            <tr key={newArray[i] + "-" + newArray[i + 1] + "-" + i}>
                <td style={{ border: "1px solid black " }}>
                    {newArray[i]}
                </td>
                <td style={{ border: "1px solid black " }}>
                    {newArray[i + 1]}
                </td>
            </tr>
          );
    }
    return tableRows;
}



render() {
    return (
      <table style={{ border: "1px solid black " }}>
        <tbody>
          <th style={{ border: "1px solid black " }}>column1</th>
          <th style={{ border: "1px solid black " }}>column2</th>
        </tbody>
        <tbody>{this.showTable()}</tbody>
      </table>
    );
  }
}

Рабочий раствор:

Answer 2

Вы можете попробовать следующее:

render() {
    return 
        <table>
            <tbody>
                {
                    newArray.map((entry, index) => {
                         if (index === newArray.length - 1) {
                            return <tr><td>entry</td></tr>
                         }
                         return (
                             <tr>entry</tr>
                             <tr/>
                         )
                    })
                }
            </tbody>
        </table>
    )
}

Я знаю, что React жалуется, если вы не вкладываете <tr> s в <tbody>.Надеюсь, это даст вам то, что вы хотите.Перевод в регистр функциональных компонентов должен быть тривиальным.

Надеюсь, это поможет.