Javascript 反应：在映射循环中，在打印了四列之后，如何断开表行？

如何使用数据列表打印下表结构？ 假设我有下面的城市列表

cities = ['San Fransisco', 'Mumbai', 'Belarus', 'Kathmandu', 'Jakarta', 'Manila', 'Copenhagen', 'Tehran', 'Khartoum', 'Jeddah']

每打印四列后，我需要将表行打断，如下所示：

<tr>
  <td>San Fransisco</td>
  <td>Mumbai</td>
  <td>Belarus</td>
  <td>Kathmandu</td>
</tr>
<tr>
  <td>Jakarta</td>
  <td>Manila</td>
  <td>Copenhagen</td>
  <td>Tehran</td>
</tr>
<tr>
  <td>Khartoum</td>
  <td>Jeddah</td>
</tr>

旧金山
孟买
白俄罗斯
加德满都
雅加达
马尼拉纸
哥本哈根
德黑兰
喀土穆
吉达

以下是我尝试过的：

<table className="table">
  <thead>
    <tr>
      <th>Delivery Location</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    {cities && cities.map((zone, i) => { return (
       {(i % 4 === 0) ? <tr key={i}> : null }
         <td>{zone.name}</td>
       {(i % 4 === 0) ? </tr> : null }
    )})}

  </tbody>
</table>

交货地点
{cities&&cities.map（（区域，i）=>{return(
{（i%4==0）？：null}
{zone.name}
{（i%4==0）？：null}
)})}

---

但是我的IDE显示了多个语法错误。我还尝试在代码周围添加一个换行div，但仍然会出现错误。

可以将数组减少为一个数组，每个数组有4个元素，然后有一个嵌套的映射结构，如

类应用程序扩展了React.Component{
状态={
rcities:[‘旧金山’、‘孟买’、‘白俄罗斯’、‘加德满都’、‘雅加达’、‘马尼拉’、‘哥本哈根’、‘德黑兰’、‘喀土穆’、‘吉达’]
}
componentDidMount（）{
常数大小=4；
var rcities=[…this.state.rcities]；
const res=rcities.reduce（（acc，curr，i）=>{
如果（！（i%size））{//如果索引为0或可以除以'size`。。。
acc.push（rcities.slice（i，i+size））；/…将原始数组的块推送到累加器
}
返回acc；
}, []);
this.setState（{cities:res}）
}
render（）{
console.log（this.state.cities）
返回(
交货地点
A.
B
C
{this.state.cities&&this.state.cities.map（（区域，i）=>{return(
{zone.map（（城市，索引）=>{
返回{city}
})}
)})}
)
}
}
ReactDOM.render（，document.getElementById（'app'））

---

您可以将数组减少为一个数组，每个数组有4个元素，然后有一个嵌套的映射结构，如

类应用程序扩展了React.Component{
状态={
rcities:[‘旧金山’、‘孟买’、‘白俄罗斯’、‘加德满都’、‘雅加达’、‘马尼拉’、‘哥本哈根’、‘德黑兰’、‘喀土穆’、‘吉达’]
}
componentDidMount（）{
常数大小=4；
var rcities=[…this.state.rcities]；
const res=rcities.reduce（（acc，curr，i）=>{
如果（！（i%size））{//如果索引为0或可以除以'size`。。。
acc.push（rcities.slice（i，i+size））；/…将原始数组的块推送到累加器
}
返回acc；
}, []);
this.setState（{cities:res}）
}
render（）{
console.log（this.state.cities）
返回(
交货地点
A.
B
C
{this.state.cities&&this.state.cities.map（（区域，i）=>{return(
{zone.map（（城市，索引）=>{
返回{city}
})}
)})}
)
}
}
ReactDOM.render（，document.getElementById（'app'））

我可以知道为什么要将4个数据拆分为一行吗？我的想法是，我们可以先渲染城市列表，然后我们可以在4列布局中轻松显示它们，而无需表格。我想在一个表格行中的4列中容纳4个城市，然后转到下一列，即在

索引4

和

索引8

上，循环应该打印和显示。你是说，我们首先渲染城市，让它们在4列布局中以表的形式出现？为了让你更容易理解，考虑引导柱。你可以有一个类似cities.map（（zone，i）=>{return（{zone.name}）的东西是的，我想到了这个主意。但是在这个特殊的例子中，我必须实现表列，而不是使用引导网格。可能是错的，但我想你需要额外的“return（）”我想知道你为什么要把4个不需要的数据分成一行？我想的是，我们可以先呈现城市列表，然后在没有表格的情况下，让它们在4列布局中轻松可见。我想在一个表格行的4列中容纳4个城市，然后转到下一行，即

索引4

和

索引8 < /代码>循环应该打印。你的意思是，我们首先渲染城市，让它们在4列布局中以表的形式出现？为了让你更容易理解，考虑引导柱。你可以有一些像这样的城市。map（（区域，i）= {{返回（{区域} }}）}是的，我想到了这个想法。但在这个特殊的例子中，我必须实现表列，而不是使用引导网格。这可能是错误的，但我认为您需要在html中使用s。