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

Question

我还使用 ReduxLazyScroll 来实现无限滚动效果并且它有效但之前它只是 ul -> li 列表。现在我希望我的应用程序以 bootstrap-grid 样式生成 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>
))}

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

Answer 2

您可以对 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>
))

Answer 3

这是根据@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 因为小数点如果项目是偶数可能会导致问题。

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

Using .map() helper with bootstrap <Col sm="4" /> layout in React

javascript

twitter-bootstrap

reactjs

bootstrap-4

reactstrap