手写antd的Row组件和Col组件

背景

为什么要自己手写antd的Row组件和Col组件呢?

很简单,就是因为设计稿要求表单内一行五个FormItem,并且这几个FormItem随着屏幕尺寸自适应。但是antd的栅格化系统是按照24等分来的,最关键的是antd中的Col组件的span不支持小数,而需求的一行5个,24/5 = 4.8,是不支持的,所以只能自己手写了

实现这个需求实际上有两个方式

  • 不封装纯css实现
  • 封装组件

这里主要表现的是第二种封装组件的形式

实现思路

手写MyRowMyCol

MyRow组件接收gutterchildren作为props。gutter用于定义列与列之间的间隔,children则是要渲染在行内的内容。

MyCol组件接收decimalSpan, children, gutter, flex, style, 和 className作为props:

  • decimalSpan是一个可选的数字,表示占用的网格列数的百分比(相对于24列的总宽度)。如果提供,它将计算为占总宽度的百分比,并用于设置列的宽度。
  • gutter定义了列之间的间隔。
  • flex是一个可选的属性,用于设置列的弹性布局。如果是数字,将会被转换成百分比形式的flex值;如果是字符串,则直接使用。
  • style是一个可选的CSS属性对象,可以覆盖或添加自定义样式。
  • className是一个可选的字符串,用于应用CSS类。

实现方式

MyRow只是简单地将props传递给Ant Design的Row组件。

MyCol则更加复杂一些,它首先计算spanWidth的值,如果decimalSpan被提供,spanWidth将是列宽度的百分比;否则,它是0。然后,如果flex被提供,会创建一个flexStyle对象,其中包含适当的flex属性。这些样式(包括从style prop传入的任何附加样式)都会被应用到一个div元素上,而不是Ant Design的Col

下面就是整个组件的代码,ts+hook

typescript 复制代码
import { Row } from 'antd';
import React from 'react';
import type { Gutter } from 'antd/es/grid/row';

export const MyRow = ({
  gutter,
  children,
}: {
  gutter: Gutter | [Gutter, Gutter];
  children: React.ReactNode;
}) => <Row gutter={gutter}>{children}</Row>;

export const MyCol = ({
  decimalSpan,
  children,
  gutter,
  flex,
  style ={},
  className,
}: {
  decimalSpan?: number;
  children: React.ReactNode;
  gutter: number
  flex?: number | string;
  style?:React.CSSProperties
  className?:string
}) => {

    // 如果提供了span属性,计算宽度的百分比
    const spanWidth = decimalSpan ? `${(decimalSpan / 24) * 100}%` : 0;

    // 如果提供了flex属性,根据flex值设置弹性布局
    const flexStyle = flex ? { flex: typeof flex === 'number' ? `0 0 ${flex}%` : flex } : {};
  
    const colStyle = {
      paddingLeft: gutter / 2,
      paddingRight: gutter / 2,
      width: spanWidth, // 如果flex属性存在,spanWidth将会被flex样式覆盖
      ...flexStyle,
      ...style,
    };
  return <div className={className} style={colStyle}>{children}</div>;
};
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json