如何为React组件创建类Bootstrap的简写Props（React+TypeScript实现）

核心逻辑 #

通过预定义尺寸映射、生成强类型约束的简写Props，再封装工具函数解析这些Props为CSS样式，最终通过高阶组件或自定义基础组件实现功能。

1. 定义尺寸系统与强类型约束 #

先确定尺寸与像素值的对应关系，再用TypeScript生成所有合法的边距/内边距简写Prop类型，确保类型检查和自动补全生效。

// 自定义尺寸映射，对应Bootstrap spacer规则，可按需修改
const SPACER_SIZES = {
  0: 0,
  1: 4,
  2: 8,
  3: 16,
  4: 24,
  5: 32,
  auto: 'auto'
} as const;

// 提取尺寸键值类型
type SpacerKey = keyof typeof SPACER_SIZES;

// 生成所有合法的边距简写Prop类型
type MarginProp = 
  `m${SpacerKey}` | `mx${SpacerKey}` | `my${SpacerKey}` |
  `mt${SpacerKey}` | `mb${SpacerKey}` | `ml${SpacerKey}` | `mr${SpacerKey}`;

// 生成所有合法的内边距简写Prop类型
type PaddingProp = 
  `p${SpacerKey}` | `px${SpacerKey}` | `py${SpacerKey}` |
  `pt${SpacerKey}` | `pb${SpacerKey}` | `pl${SpacerKey}` | `pr${SpacerKey}`;

// 合并所有简写Props类型，支持传入boolean（启用对应尺寸）或自定义数值
type SpacerProps = {
  [K in MarginProp | PaddingProp]?: SpacerKey | number | boolean;
};

2. 封装Props解析工具函数 #

将简写Props转换成对应的CSS样式对象，支持自定义数值和预设尺寸的解析。

import { CSSProperties } from 'react';

function parseSpacerProps(props: SpacerProps): CSSProperties {
  const style: CSSProperties = {};

  Object.entries(props).forEach(([prop, value]) => {
    // 忽略false值
    if (value === false || value == null) return;

    // 确定尺寸值：如果是boolean则取预设尺寸，否则用传入值
    let size: string | number;
    if (typeof value === 'boolean') {
      const sizeKey = prop.slice(1) as SpacerKey;
      size = SPACER_SIZES[sizeKey] ?? sizeKey;
    } else {
      size = typeof value === 'number' ? `${value}px` : value;
    }

    // 根据Prop前缀映射到CSS属性
    switch (prop[0]) {
      case 'm':
        if (prop.startsWith('mx')) {
          style.marginLeft = size;
          style.marginRight = size;
        } else if (prop.startsWith('my')) {
          style.marginTop = size;
          style.marginBottom = size;
        } else if (prop.startsWith('mt')) {
          style.marginTop = size;
        } else if (prop.startsWith('mb')) {
          style.marginBottom = size;
        } else if (prop.startsWith('ml')) {
          style.marginLeft = size;
        } else if (prop.startsWith('mr')) {
          style.marginRight = size;
        } else {
          style.margin = size;
        }
        break;
      case 'p':
        if (prop.startsWith('px')) {
          style.paddingLeft = size;
          style.paddingRight = size;
        } else if (prop.startsWith('py')) {
          style.paddingTop = size;
          style.paddingBottom = size;
        } else if (prop.startsWith('pt')) {
          style.paddingTop = size;
        } else if (prop.startsWith('pb')) {
          style.paddingBottom = size;
        } else if (prop.startsWith('pl')) {
          style.paddingLeft = size;
        } else if (prop.startsWith('pr')) {
          style.paddingRight = size;
        } else {
          style.padding = size;
        }
        break;
    }
  });

  return style;
}

3. 实现组件增强方案 #

提供两种可选方式，按需选择：

方案A：高阶组件（HOC）增强现有组件

给任意React组件添加简写Props支持，不侵入原有组件代码。

import React from 'react';

type EnhancedProps<T extends React.ElementType> = React.ComponentProps<T> & SpacerProps;

function withSpacer<T extends React.ElementType>(Component: T) {
  return function EnhancedComponent(props: EnhancedProps<T>) {
    // 分离简写Props与原组件Props
    const spacerProps: SpacerProps = {};
    const restProps = {} as Omit<EnhancedProps<T>, keyof SpacerProps>;

    Object.entries(props).forEach(([key, value]) => {
      if ((key.startsWith('m') || key.startsWith('p')) && key in props) {
        spacerProps[key as keyof SpacerProps] = value as any;
      } else {
        restProps[key as keyof typeof restProps] = value;
      }
    });

    // 合并样式
    const spacerStyle = parseSpacerProps(spacerProps);
    const mergedStyle = { ...(restProps.style as CSSProperties), ...spacerStyle };

    return <Component {...restProps} style={mergedStyle} />;
  };
}

// 使用示例
const SpacedDiv = withSpacer('div');
const SpacedButton = withSpacer(YourCustomButtonComponent);

// 调用组件
<SpacedDiv mx3 my2 p4>带简写边距的内容</SpacedDiv>
<SpacedButton mx={20} py1>自定义尺寸的按钮</SpacedButton>

方案B：自定义基础Box组件

直接封装一个内置简写Props支持的基础容器组件，适合作为项目统一的布局基础组件。

import React from 'react';

type BoxProps = React.HTMLAttributes<HTMLDivElement> & SpacerProps;

const Box: React.FC<BoxProps> = (props) => {
  // 收集所有简写Props
  const spacerProps: SpacerProps = {};
  const restProps = { ...props };

  Object.keys(props).forEach(key => {
    if ((key.startsWith('m') || key.startsWith('p')) && key in props) {
      spacerProps[key as keyof SpacerProps] = props[key as keyof SpacerProps];
      delete restProps[key as keyof typeof restProps];
    }
  });

  // 合并样式
  const spacerStyle = parseSpacerProps(spacerProps);
  restProps.style = { ...restProps.style, ...spacerStyle };

  return <div {...restProps} />;
};

// 使用示例
<Box mx3 my2 p4 bg="#f5f5f5">基础容器组件</Box>
<Box ml="auto" mr="auto" style={{ maxWidth: 1200 }}>居中容器</Box>

4. 类型优化与扩展 #

• 自动补全：通过SpacerProps的类型定义，编辑器会自动提示所有合法的简写Props，避免拼写错误。
• 响应式扩展：如果需要支持响应式断点（如mx-md-3），可扩展Prop类型为MarginProp | ${MarginProp}-${'sm'|'md'|'lg'|'xl'}``，并在解析函数中添加媒体查询逻辑。
• 自定义尺寸：允许传入任意数值覆盖预设尺寸，比如mx={30}会直接生成margin-left: 30px; margin-right: 30px;。

方案优势 #

• 强类型保障：完全基于TypeScript的类型约束，不存在第三方组件库的类型模糊问题。
• 高度定制化：尺寸映射、Prop规则均可按需调整，适配项目设计规范。
• 轻量无依赖：无需引入大型UI组件库，仅需少量工具代码即可实现功能。

内容的提问来源于stack exchange，提问作者sefab20090