如何为map循环创建的div添加行号

在react组件中，经常需要基于传入的props数据创建多个小方格。比如：

<div id="container">
{ itemdata.map((item, index) => (
          <div key={index} style={{ ... }} > </div>
        )) }
</div>

效果如下：

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

在此基础上，我们想要给container div添加行号，就像编辑器编辑代码一样，前面显示行号。要实现这一需求，可以采用以下方法：

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

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

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

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

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