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

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

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

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

{ itemdata.map((item, index) => (
          
 
        )) }

效果如下：

在此基础上，我们想要给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;
}

      

        {indexData.map((item, index) => (
          

            {index}
          
        ))}
      
      

        {itemData.map((item, index) => (
          

        ))}
      
    

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