时间戳

首页 > 解决方案 > 如何根据某些条件动态渲染两层元素

javascript - 如何根据某些条件动态渲染两层元素

问题描述

假设svg是父元素，rect将是最终渲染中的子元素。我想在不同的变化状态下渲染它

对于每 5 个矩形将有一个svg父级，因此如果rect值为 8 ，它将呈现为第一个svg具有 5 个子元素和第二个svg剩余3 个元素

const Svg = ({total}) => {
 let rects = total
 let totalSvgs = Math.ceil(rects/5)
return(
// i have tried using map and for-loops here
)
}

标签： javascriptreactjs

解决方案

总结将你Rects分成一系列rectChunks......这将使map......

const rects = []; /** your rect objs */
const svgs = []; /** your svg objs */

const chunkSize = 5;
const rectLength = rects.length;

const svgLength = Math.ceil(rectLength / chunkSize);

/** 1. Divide your array of rects into an array of small chunks of size 5 */
const rectChunks = [];

for (let i = 0; i < rectLength; i += chunkSize) {
  const chunk = rects.slice(i, i + chunkSize);
  rectChunks.push(chunk);
}

/** 2. Render */
return svgs.map((svgItem, index) => (
  <Svg {...svgItem}>
    {rectChunks[index].map(rectItem => (
      <Rect {...rectItem} />
    ))}
  </Svg>
));

推荐阅读