如何复用PropTypes？ButtonDefault组件PropTypes在ButtonGroup中复用失败的解决方案

首先，咱们来梳理下你遇到的问题：你想把ButtonDefault的PropTypes复用在ButtonGroup的buttons数组校验里，但直接展开导入的对象没生效，console.log也没看到预期内容。其实问题大概率出在导入导出的一致性或者PropTypes.shape的使用方式上，下面给你一步步的解决方案：

1. 统一PropTypes定义文件 #

先把ButtonDefault的PropTypes单独抽成一个可复用的模块，这样ButtonDefault和ButtonGroup都用同一个定义，彻底避免重复代码：

// src/types/buttonTypes.js
import PropTypes from 'prop-types';

// 定义并导出ButtonDefault的PropTypes对象
export const buttonDefaultPropTypes = {
  type: PropTypes.string,
  text: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
  hidden: PropTypes.bool,
  iconClass: PropTypes.string,
  to: PropTypes.string,
  handleClick: PropTypes.func,
  size: PropTypes.string,
  iconColor: PropTypes.string,
  fontWeight: PropTypes.string,
  paddingRight: PropTypes.string,
  paddingTop: PropTypes.string,
  paddingBottom: PropTypes.string,
  paddingLeft: PropTypes.string,
  hoverBorder: PropTypes.string,
  iconLeft: PropTypes.bool,
  iconSize: PropTypes.string,
  transparent: PropTypes.bool,
};

2. 在ButtonDefault组件中引用这个定义 #

修改ButtonDefault组件，让它的propTypes直接使用刚才导出的对象，保证定义唯一且同步：

// ButtonDefault.js
import PropTypes from 'prop-types';
import { buttonDefaultPropTypes } from 'src/types/buttonTypes';

// 直接赋值，不用重复写PropTypes
ButtonDefault.propTypes = buttonDefaultPropTypes;

3. 在ButtonGroup中复用这个定义 #

现在在ButtonGroup里，直接把这个对象传给PropTypes.shape()就可以了，不需要多余的展开运算符（当然展开也能生效，但直接传更简洁）：

// ButtonGroup.js
import React from 'react';
import PropTypes from 'prop-types';
import styles from './buttonGroup.module.scss';
import ButtonDefault from 'src/components/atoms/Button/ButtonDefault';
import { buttonDefaultPropTypes } from 'src/types/buttonTypes'; // 直接导入目标定义

const ButtonGroup = ({ buttons }) => (
  <div className={styles['btn-group']}>
    {buttons.map(button => {
      // 这里建议用展开运算符传递所有props，避免漏传后续新增的属性
      return <ButtonDefault key={button.id} {...button} />;
    })}
  </div>
);

ButtonGroup.propTypes = {
  buttons: PropTypes.arrayOf(PropTypes.shape(buttonDefaultPropTypes)), // 直接传入复用的定义
};

export default ButtonGroup;

为什么你的原方法无效？ #

可能的原因有这几个：

• 导入路径错误：如果src/types不是正确的文件路径，或者你的buttonDefaultType没有在src/types/index.js中正确导出，会导致type.buttonDefaultType是undefined，自然无法生效。
• console.log的误解：PropTypes的校验器（比如PropTypes.string）本身是函数，console.log的时候不会显示成你写的字符串，而是类似[Function: bound checkType]的内容，这是正常的，不影响实际的校验功能。
• 展开运算符的冗余：PropTypes.shape()本身接受一个对象，你展开buttonDefaultType是可行的，但如果导入的对象本身有问题，展开后还是无效。

额外优化点 #

在渲染ButtonDefault的时候，用{...button}传递所有props，这样不管你后续给ButtonDefault加什么新的PropTypes，ButtonGroup都不需要修改代码，自动支持新属性。

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