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%;
}
相关推荐
智码看视界1 小时前
老梁聊全栈系列:(阶段一)架构思维与全局观
java·javascript·架构
小周同学@3 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok3 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~3 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
博客zhu虎康4 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海4 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
wordbaby5 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹5 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
码上暴富6 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
伍哥的传说7 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入