Ant Design Button 组件二次开发示例：类型继承

以下是基于 Ant Design 组件做二次开发的 Button 组件继承示例：

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

const PrimaryButton = ({ children, ...props }) => {
  return (
    <Button type='primary' {...props}>
      {children}
    </Button>
  );
};

const DangerButton = ({ children, ...props }) => {
  return (
    <Button type='danger' {...props}>
      {children}
    </Button>
  );
};

const CustomButton = ({ type, children, ...props }) => {
  if (type === 'primary') {
    return <PrimaryButton {...props}>{children}</PrimaryButton>;
  } else if (type === 'danger') {
    return <DangerButton {...props}>{children}</DangerButton>;
  } else {
    return <Button {...props}>{children}</Button>;
  }
};

export default CustomButton;

在上面的代码中，我们定义了三个 Button 组件：PrimaryButton，DangerButton 和 CustomButton。其中，PrimaryButton 组件继承了 antd 的 Button 组件，并设置了 type 为 'primary'。DangerButton 组件同理。CustomButton 组件则根据传入的 type 属性，决定使用哪个 Button 组件。如果 type 为 'primary'，则使用 PrimaryButton 组件；如果 type 为 'danger'，则使用 DangerButton 组件；否则使用 antd 的 Button 组件。

这样，我们就可以根据需要，使用不同类型的 Button 组件了。例如：

import React from 'react';
import CustomButton from './CustomButton';

const App = () => {
  return (
    <div>
      <CustomButton>Default Button</CustomButton>
      <CustomButton type='primary'>Primary Button</CustomButton>
      <CustomButton type='danger'>Danger Button</CustomButton>
    </div>
  );
};

export default App;

在上面的代码中，我们使用了三个 CustomButton 组件，分别是默认类型、primary 类型和 danger 类型。这些 Button 组件继承了 antd 的 Button 组件，并根据不同的类型，设置了不同的样式。