Javascript 从React中的循环创建引导网格

我在使用引导程序从循环函数创建网格时遇到问题。在下面的代码中，cities_index.jsx有一个无序列表（ul），并为数组中的每个项使用一个映射循环，而cities_index_item是一个单独的文件，它为每个项创建li。此操作跨两个文件执行

我遇到的问题是，我不知道如何使用循环一次为两个li创建一行。目前，它给每一个李分配自己的一行——理想情况下，我希望每两个李分配一行。我可以将它们硬编码为那样，但我认为以某种方式从循环函数输出网格会更有效

有人能帮忙吗？任何帮助都将不胜感激

//cities_index.jsx

...

render() {
  return (
    <div>
      <ul>
        {
          this.props.cities.map((city, id) => (
            <CitiesIndexItem key={id} city={city} />
          ))
        }
      </ul>
      {this.props.children}
    </div>
  );
 }
}

export default CitiesIndex;


//cities_index_item.jsx

import React from 'react';
import { Link } from 'react-router';

const CitiesIndexItem = ({ city, router }) => (
  <li className="row">
    <Link to={`/cities/${city.id}`}>
      {city.name}
    </Link>
  </li>
);

export default CitiesIndexItem;

//cities\u index.jsx
...
render（）{
返回(

{
this.props.cities.map（（city，id）=>(
))
}

{this.props.children}
);
}
}
导出默认CitieIndex；
//城市索引项目.jsx
从“React”导入React；
从“反应路由器”导入{Link}；
const CitiesIndexItem=（{city，router}）=>(

{city.name}

);
导出默认CitiesIndexItem；

我建议查看组件，而不是列出一个列表，除非您有特定的理由列出一个列表

使用Grids，您可以将在循环中创建的div的类设置为“col-md-6”，这将使每个div的宽度为其容器的50%，从而保持每行两个组件

因此，您将拥有一个容器div，并迭代创建CitiesIndexItem组件，该组件将返回另一个具有适当引导类名的div

比如：

//cities_index.jsx

...

render() {
  return (
    <div className="container-fluid">
      {
        this.props.cities.map((city, id) => (
          <CitiesIndexItem key={id} city={city} />
        ))
      }
      {this.props.children}
    </div>
    );
  }
}

export default CitiesIndex;


  //cities_index_item.jsx

  import React from 'react';
  import { Link } from 'react-router';

  const CitiesIndexItem = ({ city, router }) => (
    <div className="col-md-6">
      <Link to={`/cities/${city.id}`}>
          {city.name}
      </Link>
    </div>
 );

 export default CitiesIndexItem;

//cities\u index.jsx
...
render（）{
返回(
{
this.props.cities.map（（city，id）=>(
))
}
{this.props.children}
);
}
}
导出默认CitieIndex；
//城市索引项目.jsx
从“React”导入React；
从“反应路由器”导入{Link}；
const CitiesIndexItem=（{city，router}）=>(
{city.name}
);
导出默认CitiesIndexItem；

也可能值得一看