React Hooks中如何复用Vue Size Mixin的尺寸Props？

1. 尺寸Props在多React组件中复用的实现方式 #

方式一：高阶组件（HOC）修正版 #

你之前的HOC写法未处理尺寸Props的验证与逻辑计算，正确的HOC应负责封装尺寸校验、优先级判断逻辑，再将最终计算结果传递给原组件：

// 尺寸验证工具函数
const validateSize = (value) => ['large', 'medium', 'small'].includes(value);

// 封装尺寸逻辑的高阶组件
export const withSize = (Component) => (props) => {
  const { size, small, sm, medium, md, large, lg, urInput, defaultSize = 'medium', ...restProps } = props;
  
  // 计算最终尺寸，与Vue的defineSize逻辑对齐
  let computedSize;
  if (size && validateSize(size)) {
    computedSize = size;
  } else if (medium || md) {
    computedSize = 'medium';
  } else if (large || lg) {
    computedSize = 'large';
  } else if (small || sm) {
    computedSize = 'small';
  } else if (urInput?.size && validateSize(urInput.size)) {
    computedSize = urInput.size;
  } else {
    computedSize = defaultSize;
  }

  return <Component {...restProps} size={computedSize} />;
};

// 使用示例：包裹复选框组件
const MyCheckboxComponent = (props) => {
  return <input type="checkbox" className={`checkbox-${props.size}`} />;
};

const CheckboxWithSize = withSize(MyCheckboxComponent);

// 父组件调用
<CheckboxWithSize size="medium" />
<CheckboxWithSize large />

方式二：Props组合 + 工具函数 #

若觉得HOC嵌套层级复杂，可提取独立工具函数，让需要尺寸逻辑的组件自行调用：

// 尺寸计算工具函数
export const computeSize = (props) => {
  const { size, small, sm, medium, md, large, lg, urInput, defaultSize = 'medium' } = props;
  const validateSize = (val) => ['large', 'medium', 'small'].includes(val);

  if (size && validateSize(size)) return size;
  if (medium || md) return 'medium';
  if (large || lg) return 'large';
  if (small || sm) return 'small';
  if (urInput?.size && validateSize(urInput.size)) return urInput.size;
  return defaultSize;
};

// 组件内使用
const MyCheckboxComponent = (props) => {
  const size = computeSize(props);
  return <input type="checkbox" className={`checkbox-${size}`} />;
};

// 父组件调用
<MyCheckboxComponent sm />
<MyCheckboxComponent size="large" />

2. 使用React Hooks替换Vue Mixin实现尺寸Props复用 #

自定义Hook是React中复用逻辑的最优方案，我们可以封装useSize Hook，把尺寸验证、计算逻辑全部封装进去：

// 自定义Hook：useSize
export const useSize = (props) => {
  const validSizes = ['large', 'medium', 'small'];
  const validateSize = (value) => validSizes.includes(value);

  const { size, small, sm, medium, md, large, lg, urInput, defaultSize = 'medium' } = props;

  // 计算最终尺寸
  const computedSize = (() => {
    if (size && validateSize(size)) return size;
    if (medium || md) return 'medium';
    if (large || lg) return 'large';
    if (small || sm) return 'small';
    if (urInput?.size && validateSize(urInput.size)) return urInput.size;
    return defaultSize;
  })();

  return computedSize;
};

// 复选框组件中使用Hook
const MyCheckboxComponent = (props) => {
  const size = useSize(props);
  return (
    <div className={`checkbox-container checkbox-${size}`}>
      <input type="checkbox" />
      <label>{props.label}</label>
    </div>
  );
};

// 父组件调用示例
<MyCheckboxComponent label="选择项" sm />
<MyCheckboxComponent label="选择项" size="large" />
<MyCheckboxComponent label="选择项" md />

这种方式的优势在于：逻辑完全封装，组件只需传入Props即可拿到计算结果；无额外嵌套，代码简洁；可在任意函数组件中复用，灵活性极强。

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