## 前言
一般來說，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>
## 結尾語
看到這，相信大家已經知道如何自定義一個最簡單而又功能兼備的組件，掌握其中主要知識點，再在這基礎上自行拓展，相信大家都可以寫出很棒都定制型組件！