Javascript 限制一个动态数据源中html元素的数量

我想将动态给定数组中

元素的数量限制为三个

因此，对于十个元素的数组，我想呈现四个

。前三个带有三个

，最后一个带有一个

我现在做的是：

const renderElements = elements => {
  let futureRowsIndex = 0;
  const futureRows = [];

  elements.forEach((element, index) => {
    if (!((index + 1) % 3)) {
      futureRowsIndex += 1;
    }
    if (!futureRows[futureRowsIndex]) {
      futureRows[futureRowsIndex] = `<Col span={8}>${element.name}</Col>`;
    } else {
      futureRows[futureRowsIndex] += `<Col span={8}>${element.name}</Col>`;
    }
  });

  return futureRows.map(futureRow => `<Row>${futureRow}</Row>`);
};

const renderements=elements=>{
让futureRowsIndex=0；
常量未来行=[]；
elements.forEach（（元素，索引）=>{
如果（！（（索引+1）%3））{
未来增长指数+=1；
}
如果（！futureRows[futureRowsIndex]）{
futureRows[futureRowsIndex]=`${element.name}`；
}否则{
futureRows[futureRowsIndex]+=`${element.name}`；
}
});
返回futureRow.map（futureRow=>`${futureRow}`）；
};

然后使用

危险的LysetinerHTML

渲染它

但我不认为这是解决这类问题的正确方法

---

那么如何解决呢？

避免使用

危险的HTML

，而是将数据切成块，映射到切片数据上，并在

中用

s包装。接下来，将此

与

子项一起推入
分块的
数组。所有数据分块后，React将把这个
分块的数组作为一个整体呈现

chunked
数组如下所示：

[
  [
    <Row>
      <Col/>
      <Col/>
      <Col/>
    </Row>
  ],
  [
    <Row>
      <Col/>
      <Col/>
      <Col/>
    </Row>
  ]
  ...etc
]

组件/App.js

import map from "lodash/map";
import React from "react";
import { Col, Row } from "antd";

export default ({ columns, data }) => {
  const chunked = [];
  let key = 0;
  let beginIndex = 0;
  let endIndex = columns;

  while (key <= Math.ceil(data.length / columns)) {
    chunked.push(
      <Row key={key}>
        {map(
          data.slice(beginIndex, endIndex),
          ({ color, background, name }) => (
            <Col
              style={{ background, height: 75 }}
              key={name}
              span={24 / columns}
            >
              <div style={{ color, padding: 20, textTransform: "uppercase" }}>
                {name}
              </div>
            </Col>
          )
        )}
      </Row>
    );
    beginIndex = beginIndex + columns;
    endIndex = endIndex + columns;
    key++;
  }

  return chunked;
};

import React from "react";
import RenderColors from "./renderColors";
import colors from "./colors";

export default () => (
  <div className="container">
    <h1 className="title">Dynamic Rows</h1>
    <RenderColors columns={3} data={colors} />
  </div>
);

export default [
  { background: "#F44539", name: "Red", color: "white" },
  { background: "#E82363", name: "Pink", color: "white" },
  { background: "#9B2BAF", name: "Purple", color: "white" },
  { background: "#673DB6", name: "Deep Purple", color: "white" },
  { background: "#4152B3", name: "Indigo", color: "white" },
  { background: "#2695F3", name: "Blue", color: "white" },
  { background: "#0BA7F4", name: "Light Blue", color: "white" },
  { background: "#00BBD3", name: "Cyan", color: "white" },
  { background: "#009587", name: "Teal", color: "white" },
  { background: "#4DAE51", name: "Green", color: "white" },
  { background: "#8AC24B", name: "Light Green", color: "black" },
  { background: "#CCDB3C", name: "Lime", color: "black" },
  { background: "#FFEA3D", name: "Yellow", color: "black" },
  { background: "#FFC010", name: "Amber", color: "black" },
  { background: "#FF9700", name: "Orange", color: "black" },
  { background: "#FF5827", name: "Deep Orange", color: "white" },
  { background: "#785649", name: "Brown", color: "white" },
  { background: "#9D9D9D", name: "Warm Grey", color: "black" },
  { background: "#607C8A", name: "Cool Grey", color: "white" }
];

注意：SO并不是为了改进现有的工作代码。这是本书的一般目的。简单地说“我认为这可以做得更好”对该网站来说仍然是一个很宽泛的话题。您需要指定您认为代码不好的原因。如果问题是您不认为如何呈现数据结构是正确的，您可以询问或寻找通过HTML呈现列表的一般最佳实践。一般来说，react/angular这样的框架很适合这样做。