React中如何为map循环生成的div元素添加行号？

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《React中如何为map循环生成的div元素添加行号？》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

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

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

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

效果如下：

在此基础上，我们想要给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) =&gt; (
          <div
            key={index}
            style={{
              fontSize: "9px",
              width: "19px",
              height: "20px",
              margin: "2px",
            }}
          >
            {index}
          </div>
        ))}
      </div>
      <div className="right-box">
        {itemData.map((item, index) =&gt; (
          <div
            key={index}
            style={{
              display: "inline-block",
              width: "9px",
              height: "9px",
              margin: "2px",
              backgroundColor: item.selected ? "green" : "lightgreen",
            }}
          ></div>
        ))}
      </div>
    </div>

终于介绍完啦！小伙伴们，这篇关于《React中如何为map循环生成的div元素添加行号？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！