技巧:如何最简单的在前端代码中使用Antd组件

环境：

        语言：node.js

        编辑器：VScode

        脚手架：create-react-app

这是我的环境，其他环境大致类似。

 

首先打开Antd的网站，寻找适合的组件

Antd的组件地址：组件

这里以一个表单为例：

截图的右下角有四个选项，点击第二个，沙盒。如下图

在VScode中创建一个组件的类，名字与沙盒中class的名字一样，后缀为.js。然后将沙盒里index.js类中的所有代码copy到自己建的组件的类中，把最后一行替换为

将  ReactDOM.render(<WrappedNormalLoginForm />,     document.getElementById('container'));

替换为  export default WrappedNormalLoginForm;   

（WrappedNormalLoginForm为倒数第二行定义的const）    

然后即可在项目中使用该组件了。（如果沙盒中的index.css文件不为空，需要建一个与组件名相同的.css文件，把沙河中index.css的代码copy过去，然后在组件.js中替换掉里面引入的index.css）