Ограничить количество элементов HTML внутри одного из динамического источника данных

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 число, которое делится на 24 равномерно (1,2,3,4,6,8,12) в <RenderColors columns={3}/>, расположенном в файле App.js !

Рабочий пример: https://codesandbox.io/s/30v7qvoz3m

компонентов / 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;
};

компонентов / 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" }
];