Question

我有一个json对象数组，我想在表中填充这些元素。目前，我希望每行保留2个元素，但我希望代码可以扩展，因为我的数据大小会随着时间的推移而增长，而且每行可以容纳多个元素。

我知道可以重复填充相同元素的map函数。此时我有一个hack将两个元素作为props传递给一个row元素，然后重复填充该行。我正在寻找一个更好的解决方案，所以我可以扩展我的代码，以便能够在表格的一行中保存多个元素（列）。

编辑：我目前的黑客

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Grid, Row, Col } from 'react-bootstrap';

class ExperienceRow extends React.Component {
  render() {
    let workItemOne = this.props.workItemOne;
    let workItemTwo = this.props.workItemTwo;
    
    if(workItemTwo === null)
    {
       return (
          <Row>
            <Col md={6}>
              {workItemOne.summary}
            </Col>
          </Row>
       );
    }
    else {
      return (
          <Row>
            <Col md={6}>
              {workItemOne.summary}
            </Col>
            <Col md={6}>
              {workItemTwo.summary}
            </Col>
          </Row>
      );
    }
  }
};

export default class Experience extends React.Component {

  populateExperienceRows(data) {
    console.log("get that exp");
    console.log(this.props);

    let length = data.length;
    let rows = [];

    for(let i = 0; i < length; i += 2) {
      if( i === length - 1)
      {
        console.log("two elements");
        rows.push(<ExperienceRow workItemOne={data[i]} workItemTwo={null}/>);
      }
      else {
        console.log("one element");
        rows.push(<ExperienceRow workItemOne={data[i]} workItemTwo={data[i+1]}/>);
      }
    }
    
    console.log(rows);
    return rows;
  };

  render() {
    /*
    let data = [{"summary":"helloworld"},
                {"summary":"what is this" },
                {"summary":"Something something" }
               ];
               */
    let getExpRows = this.populateExperienceRows(this.props.experienceData);
    return (
      <div>
      <Grid>
        <h2>Experience</h2>
      </Grid>
      <Grid>
        {getExpRows}
      </Grid>
      </div>
    );
  }

};

Answer 1

您可以使用sm=6来检查this documentation。

import {Grid, Row, Col} from 'react-bootstrap';


render() {
    return (
     <Grid>
      <Row className="show-grid">
        <Col sm={6} md={6}>I am first column</Col>
        <Col sm={6} md={6}>I am 2nd column</Col>

      </Row>
     </Grid>
    )
}

DEMO：

source code
Preview

内容长的演示：

Answer 2

我遇到了同样的情况，并且没有回答这个问题。

我对这个问题的理解是你要添加每行包含2列的行。随着列表的增长，您的组件将增加行并相应地添加列。

这就是我解决我的问题。首先创建要渲染的组件数组。然后创建一个嵌套数组。

仅在此之后，映射嵌套数组并添加行组件。

changeCells(numbers){

    var cells =  keys.map((i)=>{return (
            <Col />
    )});    

    var nestedArrayCell=[];

    for (var i=0; i< cells.length;i=i+2){
        nestedArrayCell.push(cells.slice(i, i+1)); 
    }
    return nestedArrayCell;
}

render(){
        return (
        <div>
            {this.cells.map((groupCells)=>(<Row>{groupCells}</Row>))}
        </div>
        );
    }

如何在React.js中创建一个包含多个元素（列）的表

2 个答案:

DEMO：

内容长的演示：