在React中使用.map（）帮助程序和引导程序布局

Question

我还使用2018-03-16 00:24:35.619424 # datetime.now() 2018-03-15 23:55:07.006190+00:00 # last_click 进行无限滚动效果，但它只是在ReduxLazyScroll列表之前有效。现在我希望我的应用程序以bootstrap-grid样式生成3张卡片，如下所示：

ul -> li

我有一些逻辑问题，我无法解决这个问题。 所以有父组件（ <Row> <Col sm="4">.col-3</Col> <Col sm="4">.col-3</Col> <Col sm="4">.col-3</Col> </Row> ）的代码：

BeerListingScroll

所以我使用beersArray.map帮助器，我知道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); 内的逻辑没有意义：

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> 元素加载3次然后看起来像那样 - ＆gt; IMG

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

期望的结果：

这里有子组件（beer）

BeerListItem

github上的完整项目 - ＆gt; Link to github

Answer 1

如果你想这样做，你可以将它们分组在一个嵌套数组中，所以你可以用[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> ))} ，然后你可以分组迭代它们。每个啤酒组排一排，每组啤酒一列：

function sheetsToPDF() {
  var ss=SpreadsheetApp.getActive();
  var shts=ss.getSheets();
  for(var j=0;j<shts.length;j++){
    var sh=shts[j];
    var rg=sh.getDataRange()
    var vA=rg.getValues();
    var s='';
    for(vari=0;i<vA.length;i++){
      s+=vA[i].join(',') + '\n';
    }
    sheetToPDF(sh.getName(),s);
  }
}

function sheetToPDF(name,content){
  var s='';
  for(vari=0;i<vA.length;i++){
    s+=vA[i].join(',') + '\n';
  }
  DriveApp.createFile(name, content, MimeType.PDF)
}

这只是一个如何做到的例子，根据您的数据和用例，可能会有一个更清晰，更健壮的方法。

Answer 2

您可以切片啤酒数组，然后遍历切片。

由此，您将为每个切片（包含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>
))