Question

我有一个包含一些元素的数组，我想使用ncolumns在<table>中分发它们（为简单起见，假设nElements是nColumns的倍数，因此所有行都具有相同的列数）

let elements = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
let nColumns = 3;

let nElements = elements.length;

所以我希望能够呈现如下内容：

A   B   C
D   E   F
G   H   I
J   K   L

我不想对任何内容进行硬编码，因此我可以将列数更改为4并获取：

A   B   C   D
E   F   G   H
I   J   K   L

我所做的是：

let toBeRendered = [];

elements.map((e, i) => {
  // For the first element of each row I open a <tr>
  if (i % nColumns == 0) {
    toBeRendered.push(<tr>);
  }

  toBeRendered.push(<td>{e}</td>);

  // For the last element of each row I close a <tr>
  if (i % nColumns == nColumns - 1) {
    toBeRendered.push(</tr>);
  }
})

然后在返回内部：

return (
  <table> 
    {toBeRendered}
  </table>
);

我尝试将HTML标记和文本（引号之间）放在一起，生成的字符串是正确的：

<tr><td>A</td><td>B</td><td>C</td></tr><tr><td>D</td><td>E</td><td>F</td></tr><tr><td>G</td><td>H</td><td>I</td></tr><tr><td>J</td><td>K</td><td>G</td></tr>

然而，推出标签并在以后关闭标签似乎无法正常工作。

所以我的问题是：

如果我需要打开一个Tag（可以是表的<tr>元素，但它也可以是<div>或任何其他需要打开的元素，那么正确的方法是什么？然后在里面和最后渲染了几件事它关闭了。）

这只是我尝试做的一个玩具示例，但问题是相同的：我无法打开标签然后将其关闭。

无法在地图内推开标签

0 个答案: