2

我也ReduxLazyScroll用于无限滚动效果，它有效，但在它只是ul -> li列表之前。现在我希望我的应用程序以引导网格样式并排生成 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 次，然后看起来像这样 -> img 在此处输入图像描述

问题是：我应该如何重构该代码以获取第一行中的第一个、第二个和第三个数组元素，第二行中的第 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 上的完整项目 - >链接到 github

4

3 回答 3

3

如果你想这样做，你可以将它们组合在一个嵌套数组中的 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>
))}

不过，这只是如何做到这一点的一个示例，根据您的数据和用例，可能会有一种更清洁、更强大的方法。

于 2018-03-16T00:40:19.623 回答
1

您可以对 beers 数组进行切片，然后遍历切片。

这样，您将拥有每个切片的新行（由 3 种不同的啤酒项目组成）

const numberOfRows = ceil(beersArray.length / 3)

Array(numberOfRows).fill().map((_, rowIndex) => (
    <Row key={rowIndex}>
     {
       beersArray.slice(rowIndex * 3, (rowIndex *3) + 3).map(beer => (
        <Col xs="12" sm="4">
          <BeersListItem key={beer.id} beer={beer} />
        </Col>
      ))}
    </Row>
))
于 2018-03-16T00:43:21.597 回答
0

这是基于@muhammet-enginar 的答案的优化答案！

{Array(parseInt(filteredFarms.length / 1))
.fill()
.map((_, colIndex) => {
  return (
    <>
      <div className="col-lg-3">
        {filteredFarms
          ?.slice(colIndex * 4, colIndex * 4 + 4)
          ?.map((filter, key) => {
            return (
              <>
                <li>{filter.farm}</li>
              </>
            );
          })}
      </div>
    </>
  );
});}

它包含 return 因为它是 reactjs/nextjs 代码，我也使用 parseInt 因为小数，如果项目是偶数可能会导致问题。

于 2021-10-11T16:04:51.810 回答