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

Question

在react组件中，我基于传入的props的数据，创建很多小方格：

<div id="container">
{ itemData.map((item, index) => (
          <div key={index} style={{ 
            display: 'inline-block',
            width: '9px', 
            height: '9px', 
            margin: '2px',
            backgroundColor: item.selected ? 'green' : 'lightgreen'
          }}
          ></div>
        )) }
</div>

效果如下：

我有一个需求就是，想要给container div 创建行号，这里第一行我就显示1，就像编辑器编辑代码一样，前面有行号。

Answer 1

左侧的索引可以设置为 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;
}