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

在React中，如果你想要封装一个使用Ant Design库的自定义Button组件，并且涉及到TypeScript (tsx) 的支持，你可以这样做：

首先，安装Ant Design库：

npm install antd

然后创建一个名为`CustomButton.tsx`的文件，内容如下：

import React from 'react';
import { Button } from 'antd';

// 定义按钮类型，可以添加更多的状态或属性
type CustomButtonType = {
  text?: string; // 文本标签
  type?: 'primary' | 'secondary' | 'danger' | 'ghost'; // 按钮类型
  onClick?: () => void; // 点击事件处理函数
};

const CustomButton: React.FC<CustomButtonType> = ({
  text = '点击我', // 默认文本
  type = 'primary', // 默认为主按钮
  onClick,
}) => {
  return (
    <Button type={type} onClick={onClick}>
      {text}
    </Button>
  );
};

export default CustomButton;

在这个封装的`CustomButton`组件中，我们接收三个prop：`text`、`type` 和 `onClick`。用户可以根据需求传递这些值，如更改文字、设置样式或绑定点击事件。

使用这个组件的方式如下：

import CustomButton from './CustomButton';

function App() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <CustomButton text="自定义按钮" onClick={handleClick} />
    </div>
  );
}

export default App;