如何为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: width: height: margin:>
            {index}
          </div>
        ))}
      </div>
      <div classname="right-box">
        {itemData.map((item, index) => (
          <div key="{index}" style="{{" display: width: height: margin: backgroundcolor: item.selected :></div>
        ))}
      </div>
    </div>