想要给map循环创建的div添加行号，应该怎样设计呢？

左侧的索引可以设置为 absolute，右侧的方块可以设置为 relative，两者的父元素设置为 relative 且 overflow: hidden;

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  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>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.left-box {
  position: absolute;
  left: 0;
  top: 0;

  width: 19px;
  overflow: hidden;
}

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