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