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

【问题标题】：Creating a bootstrap grid from a loop in React从 React 中的循环创建引导网格
【发布时间】：2017-08-10 12:15:25
【问题描述】：

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

我遇到的麻烦是我无法弄清楚如何使用循环一次为两个 li 创建一行。目前，它给每个 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;

【问题讨论】：

标签： javascript html twitter-bootstrap reactjs jsx

【解决方案1】：

我建议查看Grid 组件而不是做一个列表，除非你有一些特定的原因需要一个列表。

使用 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;

react-bootstrap 也可能值得一试。

【讨论】：