javascript - 在 React 中将 .map() 助手与 Bootstrap <Col sm ="4"/> 布局一起使用

Question

我还使用 ReduxLazyScroll 来实现无限滚动效果，它起作用了，但之前它只是 ul -> li 列表。现在我希望我的应用程序以 Bootstrap 网格样式并排生成 3 张卡片，如下所示:

    <Row>
      <Col sm="4">.col-3</Col>
      <Col sm="4">.col-3</Col>
      <Col sm="4">.col-3</Col>
    </Row>

而且我有一些逻辑问题，我无法解决这个问题。 于是就有了父组件的代码(BeerListingScroll):

import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import ReduxLazyScroll from 'redux-lazy-scroll';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBeers } from '../../actions/';

import BeersListItem from '../../components/BeersListItem';
import ProgressIndicator from '../../components/ProgressIndicator';

class BeerListingScroll extends Component {
  constructor(props) {
    super(props);

    this.loadBeers = this.loadBeers.bind(this);
  }

  loadBeers() {
    const { skip, limit } = this.props.beers;
    this.props.fetchBeers(skip, limit);
  }

  render() {
    const { beersArray, isFetching, errorMessage, hasMore } = this.props.beers;
    return (
      <Container>
        <ReduxLazyScroll
          isFetching={isFetching}
          errorMessage={errorMessage}
          loadMore={this.loadBeers}
          hasMore={hasMore}
        >
          {beersArray.map(beer => (
            <Row>
              <Col xs="12" sm="4">
                <BeersListItem key={beer.id} beer={beer} />
              </Col>
              <Col xs="12" sm="4">
                <BeersListItem key={beer.id} beer={beer} />
              </Col>
              <Col xs="12" sm="4">
                <BeersListItem key={beer.id} beer={beer} />
              </Col>
            </Row>
          ))}
        </ReduxLazyScroll>
      </Container>

    );
  }
}

function mapStateToProps(state) {
  return {
    beers: state.beers,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchBeers }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(BeerListingScroll);

所以我正在使用 beersArray.map 助手，我知道 map 中的逻辑没有意义:

       <Row>
          <Col xs="12" sm="4">
            <BeersListItem key={beer.id} beer={beer} />
          </Col>
          <Col xs="12" sm="4">
            <BeersListItem key={beer.id} beer={beer} />
          </Col>
          <Col xs="12" sm="4">
            <BeersListItem key={beer.id} beer={beer} />
          </Col>
        </Row>

因为我将每个 beer 元素加载 3 次，然后它看起来像这样 -> 图片

---

问题是:我应该如何重构该代码以获取第一行中的第一个、第二个和第三个数组元素，第二行中的第 4、5、6 个数组元素等等？

---

期望的结果:

这里有子组件(BeerListItem)

import React from 'react';
import {
  Card,
  CardImg,
  CardBody,
  CardTitle,
  CardSubtitle,
  Button,
} from 'reactstrap';

const BeerListItem = ({ beer }) => (
  <div>
    <Card>
      <CardImg top width="100%" src={beer.image_url} alt="beer" />
      <CardBody>
        <CardTitle>{beer.name}</CardTitle>
        <CardSubtitle>{beer.tagline}</CardSubtitle>
        <Button>More details</Button>
      </CardBody>
    </Card>
  </div>
);

export default BeerListItem;

以及 github 上的完整项目 -> Link to github

Answer 1

如果你想这样做，你可以将它们以 3 的形式组合在一个嵌套数组中，所以你有 [ 而不是 [beer1,beer2,beer3,beer4,...] [beer1,beer2,beer3],[beer4,..,..],...] 然后您可以分组迭代它们，每个啤酒组一行，该组中每个啤酒一列:

beerGroupsArray.map(beerGroup => (
    <Row>
        {
            beerGroup.map(beer => {
                <Col xs="12" sm="4">
                    <BeersListItem key={beer.id} beer={beer} />
                </Col>
            })
        }
    </Row>
))}

不过，这只是如何执行此操作的一个示例，根据您的数据和用例，可能会有更清洁、更可靠的方法。