代码之家 › 专栏 › 技术社区 › Pablo De Luca

限制动态数据源中html元素的数目

ecmascript-6 loops reactjs javascript

Pablo De Luca · 技术社区 · 6 年前

<Col> <Row> 动态给定数组中的元素。

所以对于十个元素的数组,我要渲染四个元素 <世界其他地区> . 前三个加三个 <列> 最后一个有一个 <列>

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 .

那怎么解决呢?

1 回复 | 直到 6 年前

Matt Carlotta 6 年前

避免使用 dangerouslySetInnerHtml <Col> 在一个 <Row> . 下一步,按这个 < 具有 children 变成一个 chunked 数组。所有数据分块后,React将呈现此 大块的 整个阵列。

大块的 数组将如下所示:

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

columns 大小,然后设置 柱 1,2,3,4,6,8,12 )在 <RenderColors columns={3}/> 位于 应用程序.js

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

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

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