使用引导程序列进行映射

Question

我正在使用map遍历元素列表，我想要的是每行有4个元素。这是我的课程的一部分：

render() {
    return (
      <div>
        <h1>Card List</h1>

        {this.props.items ? this.props.items.map((item) =>
          <div class="cardSection">
            <Row className="show-grid">
                <Card name={item.name} imgGold={item.imgGold}  />
            </Row>
          </div>

        ) : <div>Loading!</div>}

      </div>
    )
  }
}

我想使用xs = {4} md = {4}每行4个Card组件

Answer 1

你可以做类似的事情

const items = [
  { name: "1" },
  { name: "2" },
  { name: "3" },
  { name: "4" },
  { name: "5" },
  { name: "6" },
  { name: "7" },
  { name: "8" },
  { name: "9" },
  { name: "10" },
  { name: "11" },
];

const App = () => {
  const result = items.map((x,i) => {
      return i % 4 === 0 ? items.slice(i, i+4) : null;
  }).filter(x => x != null);

  return (
    <div>
      {result.map((result, index) => {
        return (<section key={index}>
          {result.map(item => <span>{item.name}</span>)}
        </section>);
       })}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

span {
 margin-left: 5px;
 margin-right: 5px;
}

<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="root"></div>

这会将您的项目数组分为4组。您甚至可以使其接受任何所需的数字。

然后，您可以以4组为一组进行迭代和渲染。

请确保您运行该代码段，以便可以看到它的正常运行。