限制来自动态数据源的 html 元素的数量

Question

我想将动态给定数组中<Row> 元素内的<Col> 元素的数量限制为三个。

所以对于一个包含十个元素的数组，我想渲染四个<Row>。前三个有三个<Col>，最后一个有一个<Col>。

我现在做的是：

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>`);
};

然后用dangerouslySetInnerHTML 渲染它。

但我认为这不是处理这类问题的正确方法。

那么怎么解决呢？

Answer 1

避免使用dangerouslySetInnerHtml，而是将数据切片并映射到切片的数据上，并在<Col>s 内包裹<Row>。接下来，将 <Row> 和 children 推送到 chunked 数组中。在所有数据都被分块后，React 会将这个 chunked 数组作为一个整体呈现。

chunked 数组将如下所示：

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

如果您想更改columns 的大小，请在位于 App.js 文件中的<RenderColors columns={3}/> 中设置一个除以 24 的 columns 数字 (1,2,3,4,6,8,12)！

工作示例：https://codesandbox.io/s/30v7qvoz3m

components/renderColors.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;
};

components/App.js

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>
);

components/colors.js

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" }
];