Question

我在使用多维数组通过循环渲染时遇到问题。我有4 div作为列，我需要在上面放置图像（以数组形式提供）。

有关说明，您可以检查我附带的图像。（在链接下方）

image link

我花了很多时间尝试使用我的代码，最终陷入了这段代码。

    let temp=[];

    for(let i=0;i<4;i++){
        temp.push(
          <div className="imagesColumn">
                {
                    this.state.images.map((item,index) => {
                        return(
                           <img key={index} src={item.urlImages} width="100%"/>
                        )   

                    })
                }
          </div>
        )
    }

正如您在上面的代码中看到的，我想要的是，第一个循环是使4列div成为第二个循环，然后是将图像放入图像中。

我无法像我给的图像那样实现它，因为每个图像都基于第一个循环循环了4次。

我该怎么做？任何人都可以帮助并提供代码示例

Answer 1

您当前正在做的是，将状态为6张图片推送到<div>中的每张图片上，HTML / React JS不能这样工作。您可能要做的是对每列进行计算推。因此，第一列包含4n + 1图像，第二列包含4n + 2图像，依此类推。

这样，我们可以避免使用temp变量。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    images: ["Image 1", "Image 2", "Image 3", "Image 4", "Image 5", "Image 6"]
  };
  render() {
    return (
      <div className="App">
        {[1, 2, 3, 4].map(n => (
          <div className="col">
            {this.state.images.map((f, i) =>
              4 * i + n - 1 < this.state.images.length ? (
                <div className="img">{this.state.images[4 * i + n - 1]}</div>
              ) : (
                ""
              )
            )}
          </div>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

代码段

class App extends React.Component {
  state = {
    images: ["Image 1", "Image 2", "Image 3", "Image 4", "Image 5", "Image 6"]
  };
  render() {
    return (
      <div className="App">
        {[1, 2, 3, 4].map(n => (
          <div className="col">
            {this.state.images.map((f, i) =>
              4 * i + n - 1 < this.state.images.length ? (
                <div className="img">{this.state.images[4 * i + n - 1]}</div>
              ) : (
                ""
              )
            )}
          </div>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: "Segoe UI";
  line-height: 1;
}
.col {
  float: left;
  width: 25%;
}

.img {
  border: 1px solid #999;
  margin: 10px;
  padding: 5px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

注意：您可能只需要将其更改为图像即可。

这是CodeSandbox中的一个演示。

预览

说明

条件如下：

4 x imageIndex + columnNumber, where imageIndex is less than length of list of images.

因此，从理论上讲，当我们尝试循环查看列号（即[1, 2, 3, 4]）时，我们得到的是：

Col = 1
ImageIndex = 0
Image (4 * i + n - 1 = 0)
ImageIndex = 4
Image (4 * i + n - 1 = 4)

Col = 2
ImageIndex = 1
Image (4 * i + n - 1 = 1)
ImageIndex = 5
Image (4 * i + n - 1 = 5)

Col = 3
ImageIndex = 2
Image (4 * i + n - 1 = 2)

Col = 4
ImageIndex = 3
Image (4 * i + n - 1 = 3)

循环中的其他地方将不被渲染，因为它们不符合条件。

通过带有数组的多维循环进行条件渲染

1 个答案: