React 中如何为动态创建的 div 添加行号？

如何为动态创建的 react div 添加行号？

在 react 组件中，循环创建多个元素时，可能需要添加行号以提高可读性。

解决方案：

步骤 1：创建索引数组

首先，创建一个与可循环数据项数目相等的索引数组。

步骤 2：使用绝对定位创建行号

针对索引数组创建的 div 元素设置绝对定位，并将其放置在容器 div 的左侧。

步骤 3：使用相对定位创建方块

对于可循环的数据项创建的 div 元素，设置相对定位，使其相对于容器 div 进行定位。

步骤 4：隐藏溢出部分

将容器 div 的 overflow 属性设置为 hidden，以确保行号和方块保持在指定区域内。

代码示例：

const itemdata = new array(500).fill(0);
const indexdata = new array(20).fill(0);

return (
  <div classname="app">
    <div classname="left-box">
      {indexdata.map((item, index) => (
        <div key={index} style={{ fontsize: "9px", width: "19px", height: "20px", margin: "2px" }}>{index}</div>
      ))}
    </div>
    <div classname="right-box">
      {itemdata.map((item, index) => (
        <div key={index} style={{ display: "inline-block", width: "9px", height: "9px", margin: "2px", backgroundcolor: item.selected ? "green" : "lightgreen" }}></div>
      ))}
    </div>
  </div>
);

样式表：

.App {
  overflow: hidden;
  position: relative;
}

.left-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  overflow: hidden;
}

.right-box {
  margin-left: 19px;
}

这将创建一个具有行号的方块网格。行号位于左侧，而方块位于右侧。

以上就是React 中如何为动态创建的 div 添加行号？的详细内容，更多请关注其它相关文章！