Question

我正在尝试从JSX中的数组在表的每一行中生成2列。在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>嵌套在<tbody>中，就会抱怨。希望那应该给你你想要的。转换为功能组件案例应该很简单。

希望有帮助。

从JSX中的数组创建2列表

2 个答案: