grid 布局react组件可以循数据自定义渲染某个数据 ,或插入某些数据在某个索引下

js 复制代码
import React from "react";
import "./App.css"; // 引入CSS文件

interface GridDisplayProps {
  items: any[];
  rowNum?: number;
  renderItem?: (item: any, index: number) => React.ReactNode;
  customElement?: React.ReactNode;
  customIndex?: number;
}

const GridDisplay: React.FC<GridDisplayProps> = ({
  items,
  rowNum = 2,
  renderItem,
  customElement,
  customIndex = 0,
}) => {
  // 默认的渲染方式
  const defaultRenderItem = (item: any, index: number) =>
    <div>{`这是默认渲染${index}`}</div>;

  // 插入自定义元素
  const modifiedItems = [...items];
  if (customElement) {
    const targetIndex = customIndex < items.length ? customIndex : 0;
    modifiedItems.splice(targetIndex, 0, customElement);
  }

  // 将数组分成每行指定数量元素的子数组
  const rows: any[] = modifiedItems.reduce((resultArray: any[], item, index) => {
    const chunkIndex = Math.floor(index / rowNum);
    if (!resultArray[chunkIndex]) {
      resultArray[chunkIndex] = [];
    }
    resultArray[chunkIndex].push(item);
    return resultArray;
  }, []);

  return (
    <div className="container">
      {rows.map((row, rowIndex) => (
        <div className="row" key={rowIndex}>
          {row.map((item: any, index: number) => {
            const globalIndex = rowIndex * rowNum + index;
            return (
              <div
                className="item"
                key={index}
                style={{ width: `${100 / rowNum}%` }}
              >
                {React.isValidElement(item)
                  ? item
                  : renderItem
                  ? renderItem(item, globalIndex)
                  : defaultRenderItem(item, globalIndex)}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
};

export default GridDisplay;
css 复制代码
.container {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.item {
  flex: 1;
  width: 50%;
}
相关推荐
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端12 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧12 小时前
Promise 的使用
前端·javascript
前端康师傅13 小时前
JavaScript 作用域
前端·javascript
云枫晖14 小时前
JS核心知识-事件循环
前端·javascript
eason_fan14 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
XiaoSong15 小时前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js