react中封装二次Ant Design的Button组件

在React中，封装一个自定义的Button组件通常是为了复用并定制Ant Design库中的Button功能。以下是步骤和一个简化的例子：

1. 首先，导入需要的Ant Design库的Button组件：

import { Button } from 'antd';

2. 创建一个名为`CustomButton`的新组件，它接受类似Ant Design Button的各种属性作为props，如size、type、text等：

const CustomButton = ({ size = 'default', type = 'primary', text, ...rest }) => {
  return (
    <Button {...rest} size={size} type={type}>
      {text}
    </Button>
  );
};

这里的`...rest`表示剩余的prop，用于接收Ant Design Button的所有其他未列出的属性。

3. 可能还会添加一些额外的功能，比如点击事件处理：

import { useState } from 'react';

const CustomButton = ({ onClick, ...props }) => {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    onClick && onClick();
    setIsClicked(true);
  };

  return (
    <Button onClick={handleClick} disabled={isClicked} {...props}>
      {text}
    </Button>
  );
};

在这个版本中，我们引入了useState钩子来跟踪按钮是否已点击，并在点击时触发回调函数。

4. 使用新的`CustomButton`组件替代原始的Ant Design Button：

<CustomButton text="自定义按钮" onClick={() => console.log('点击事件')} />