反应：在地图循环中，如何在打印四列后打破表格行？

Anonym 发表于 Dev

匿名的

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

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>

但我的 IDE 显示多个语法错误。我还尝试在代码周围添加一个包装 div，但我仍然收到错误消息。

舒巴姆·哈特里

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

class App extends React.Component {
    state = {
        rcities: ['San Fransisco', 'Mumbai', 'Belarus', 'Kathmandu', 'Jakarta', 'Manila', 'Copenhagen', 'Tehran', 'Khartoum', 'Jeddah']
    }
    componentDidMount() {
  
const size = 4;
var rcities = [...this.state.rcities];
const res = rcities.reduce((acc, curr, i) => {
  if ( !(i % size)  ) {    // if index is 0 or can be divided by the `size`...
    acc.push(rcities.slice(i, i + size));   // ..push a chunk of the original array to the accumulator
  }
  return acc;
}, []);

    this.setState({cities: res})
    }
    render() {
        console.log(this.state.cities)
        return (
            <table className="table">
            <thead>
              <tr>
                <th>Delivery Location</th>
                <th>a</th>
                <th>b</th>
                <th>c</th>
              </tr>
            </thead>
            <tbody>

              {this.state.cities && this.state.cities.map((zone, i) => { return (
                 <tr key={i}>
                    {zone.map((city, index) => {
                    return    <td key={index}>{city}</td>
                    })}
                 </tr>
                 
                 )})}
          
            </tbody>
            </table>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。