Question

我在使用bootstrap从循环函数创建网格时遇到问题。在下面的代码中，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;

Answer 1

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

使用网格，您可以将在循环中创建的div的类设置为＆＃34; col-md-6＆＃34;，这将为每个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。

在React

1 个答案: