Question

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

因此，对于十个元素的数组，我想渲染四个<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>内用<Row>换行。接下来，将此<Row>和children推入chunked数组中。在对所有数据进行分块之后，React随后将整体渲染此chunked数组。

chunked数组将如下所示：

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

如果您想更改columns的大小，请设置一个columns数字，该数字在应用程序中的1,2,3,4,6,8,12中平均划分（<RenderColors columns={3}/>）24。 js 文件！

工作示例：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" }
];

限制来自动态数据源的一个HTML元素的数量

1 个答案: