Question

我想将数组中的多个项目映射到每行3列的网格。现在我将整个网格硬编码，但自动执行此操作应该是微不足道的。

这是最终结果的样子：

<Grid>  
  <Col> 
    <Row>Cel 1</Row>
    <Row>Cel 2</Row>
    <Row>Cel 3</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>
  <Col> 
    <Row>Cel 4</Row>
    <Row>Cel 5</Row>
    <Row>Cel 6</Row>
  </Col>          
</Grid>

这是渲染方法，它没有做太多的动作。我不知道如何开始这个问题。

render() {
    let images = [
      Images.grid1,
      Images.grid2,
      Images.grid3,
      Images.grid4,
      Images.grid5,
      Images.grid6,
      Images.grid7,
      Images.grid8,
      Images.grid9
    ];

return images.map(link => {
    return (
      <Grid>
       <Row>
        <Col>link</Col>
        <Col>link</Col>
        <Col>link</Col>
       </Row>
       <Row>
        <Col>link</Col>
        <Col>link</Col>
        <Col>link</Col>
       </Row>
      </Grid> 
      );
   });
}

Answer 1

您的图片数组应尽可能存储在state或props中，因为当您的图片更新（插入，删除或删除）时，React会重新render您的图片组件再次。

你的Images数组应该重新构造为一个例子，以便在每一行中使用三列进行渲染。

gridArray = [
    [image1, image2, image3],
    [image4, image5, image6],
    [image7, image8, image9],
];

通过此链接https://codesandbox.io/s/jly9332lzy查看我在CodeSandbox上的工作示例。

在CodeSandbox的示例中，我将组件从Grid更改为div，将Row更改为ul，将Col更改为li以避免在线沙箱上的错误。您只需将组件更改为Grid，Row和Col，稍微编辑代码以适应您的代码，一切都会正常工作。

以下是解决您问题的代码

import React from "react";
import { render } from "react-dom";

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // Your source data
    this.state = {
      images: [
        "Image 1",
        "Image 2",
        "Image 3",
        "Image 4",
        "Image 5",
        "Image 6",
        "Image 7",
        "Image 8",
        "Image 9",
      ]
    };
  }

  // this method will return structured array like this.
  // gridArray = [
  //    [image1, image2, image3],
  //    [image4, image5, image6],
  //    [image7, image8, image9],
  // ];
  imagesArrayToGridArray(totalColumns) {
    let gridArray = [[]];

    let countColumns = 1;
    for (var i = 0; i < this.state.images.length; i++) {
      gridArray[gridArray.length - 1].push(this.state.images[i]);
      if (countColumns <= totalColumns) {
        countColumns++;
      }
      if (countColumns > totalColumns && i !== this.state.images.length - 1) {
        countColumns = 1;
        gridArray.push([]);
      }
    }

    return gridArray;
  }

  // return React Components like
  // <Row>
  //   <Col>Image 1</Col>
  //   <Col>Image 2</Col>
  //   <Col>Image 3</Col>
  // </Row>
  // <Row>
  //   <Col>Image 4</Col>
  //   <Col>Image 5</Col>
  //   <Col>Image 6</Col>
  // </Row>
  // <Row>
  //   <Col>Image 7</Col>
  //   <Col>Image 8</Col>
  //   <Col>Image 9</Col>
  // </Row>
  renderGrid(gridArray) {
    return gridArray.map(row => (
      <Row>{row.map(col => (<Col>{col}</Col>))}</Row>
    ));
  }

  // render
  render() {
    let gridArray = this.imagesArrayToGridArray(3);
    return <Grid>{this.renderGrid(gridArray)}</Grid>;
  }
}

render(<YourComponent />, document.getElementById("root"));

就是这样，现在一切都会奏效。

NativeBase：在行中生成列

1 个答案: