如何在 react 组件的 map 循环中为创建的 div 添加行号
当在 react 组件中使用 map 循环创建多个元素时，经常需要给这些元素添加行号。下面是如何实现这一需求：
将行号和方格放置在各自的容器中，并将它们定位为相对容器。为了隐藏超出容器的部分，可以设置容器为相对，并设置溢出设置为隐藏。
css 代码如下：
.container { overflow: hidden; position: relative; } .left-box { position: absolute; left: 0; top: 0; width: 19px; overflow: hidden; } .right-box { margin-left: 19px; }
jsx 代码如下：
import React from "react"; const App = () => { const itemData = new Array(50).fill(0); const indexData = new Array(20).fill(0); return ( <div className="container"> <div className="left-box"> {/* 左侧的行号容器 */} {indexData.map((item, index) => ( <div key={index} style={{ fontSize: "10px", height: "20px" }}> {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> ); }; export default App;
通过上述设置，左侧容器将包含行号，右侧容器将包含方格，并且每个方格上方都显示一个相应行号。
