React组件中map循环：如何为创建的div元素添加行号？

如何在 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;

通过上述设置，左侧容器将包含行号，右侧容器将包含方格，并且每个方格上方都显示一个相应行号。

以上就是React组件中map循环：如何为创建的div元素添加行号？的详细内容，更多请关注硕下网其它相关文章！