## 前言
一般来说，Ant Design提供的都是基础组件，而在我们进行业务开发的时候，会经常有多个组件组合在一起并且会被高频调用的情况，所以这时候就用到自定义组件，那么下面我们来看下如果制作一个最简单的自定义组件。
## 自定义组件制作
1. 一般自定义组件都放在components文件夹中，找到后打开目录，新建一个Demo文件夹和一个ButtonX的js文件
2. 我们加上最简单逻辑的代码，封装一个组件`ButtonX`，使之加载后自带点击事件
3. 我们再到一开始的Demo页面引入这个自定义组件，查看是否生效
4. 打开页面发现按钮已经出现
5. 点击按钮，对应的console也出现了信息。
6. 这样一来我们的第一个自定义组件就做好了。是不是很简单？但是如果自定义组件只能写成固定的加载，那么这个组件将毫无意义，所以下面我们来学习一些常用的拓展用法
<br>
## 自定义组件拓展
### 外层参数传递
1. 想要传递按钮显示文字，Demo模块代码做如下修改：
* 将代码由
~~~
<ButtonX />
~~~
更改为
~~~
<ButtonX>自定义按钮</ButtonX>
~~~
2. 同时自定义组件做如下修改：
* 将原先的
~~~
render() {
return (
<div>
<Button type="primary" onClick={this.handleSubmit}>
按钮点击
</Button>
</div>
);
}
~~~
* 改为
~~~
render() {
const { children } = this.props;
return (
<div>
<Button type="primary" onClick={this.handleSubmit}>
{children}
</Button>
</div>
);
}
~~~
* 其中的`children`则代表包含在组件标签内的值，而传递给组件的参数都在`this.props`中获取
3. 打开系统 查看效果，发现的确如我们传入的字符一致
<br>
### 方法传递参数
1. 现在我们需要点击按钮后打印出的值是Demo模块传递过去的值
2. 修改代码
* 将原先的
~~~
<ButtonX>自定义按钮</ButtonX>
~~~
* 改为
~~~
<ButtonX print='测试打印内容'>自定义按钮</ButtonX>
~~~
3. 自定义组件做如下修改：
* 将原先的
~~~
handleSubmit = () => {
console.log('按钮点击了');
};
render() {
const { children } = this.props;
return (
<div>
<Button type="primary" onClick={this.handleSubmit}>
{children}
</Button>
</div>
);
}
~~~
* 改为
~~~
handleSubmit = print => {
console.log(print);
};
render() {
const { children, print } = this.props;
return (
<div>
<Button type="primary" onClick={this.handleSubmit(print)}>
{children}
</Button>
</div>
);
}
~~~
4. 打开系统点击按钮测试，发现点击并没有效果
5. 因为`print`是从`this.props`中获取的，再通过`this.handleSubmit(print)`传入，`this`指针会指向错误，所以需要处理一下
6. 将代码改为如下：
~~~
handleSubmit = print => {
console.log(print);
};
render() {
const { children, print } = this.props;
return (
<div>
<Button
type="primary"
onClick={() => {
this.handleSubmit(print);
}}
>
{children}
</Button>
</div>
);
}
~~~
7. 再次打开系统，发现参数传递成功
8. 最后附上两者截图以供参考
<br>
## 结尾语
看到这，相信大家已经知道如何自定义一个最简单而又功能兼备的组件，掌握其中主要知识点，再在这基础上自行拓展，相信大家都可以写出很棒都定制型组件！