如何基于antd 进行简单的组件封装

antd 是一个非常优秀的 React UI 组件库，其提供了丰富、易用的组件，可以帮助我们快速构建美观、高效的 Web 应用程序。如果你想封装自己的组件库并基于 antd 进行扩展，可以按照以下步骤进行：

1. 创建一个基础组件

首先，你需要创建一个基础组件，它包含了你要封装的组件的基本结构和样式，可以使用 antd 提供的组件进行组合。例如，如果你要封装一个按钮组件，可以创建一个 Button 组件，代码如下：

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

const MyButton = ({ children, ...restProps }) => {
  return (
    <Button {...restProps}>
      {children}
    </Button>
  );
};

export default MyButton;

2. 根据需求进行扩展

基础组件创建完成后，你可以根据自己的需求进行扩展，添加一些额外的功能或者修改样式等。例如，如果你想为按钮组件添加一个 loading 状态，可以在 MyButton 组件中添加一个 loading 属性，代码如下：

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

const MyButton = ({ children, loading, ...restProps }) => {
  return (
    <Button {...restProps} loading={loading}>
      {children}
    </Button>
  );
};

export default MyButton;

3. 导出组件并使用

最后，你需要将封装好的组件导出，然后在你的应用程序中使用它。例如，如果你想在应用程序中使用 MyButton 组件，可以按照以下方式进行：

import React from 'react';
import MyButton from './path/to/MyButton';

const App = () => {
  return (
    <div>
      <MyButton type="primary" loading={true}>Click Me</MyButton>
    </div>
  );
};

export default App;

这样，你就可以基于 antd 进行简单的组件封装了。当然，如果你需要封装更复杂的组件，可能需要更多的步骤和技巧，但这是一个很好的起点。