基於react antDesign 封裝一個簡單的Select組件

基於react antDesign 封裝一個簡單的search組件，可移步官網: 查看.

目的在基於Select功能的基礎上封裝爲圓角、改變下拉箭頭顏色Select組件，這裏命名爲jrSelect

廢話不多說啦，先看下Ant Design 給出的效果圖：

目標實現效果圖：

jsx部分實現

1 定義一個名爲JrSelect的組件，export default JrSelect導出組件
1 className={`${className} round_select`} 接收父組件className拼接到子組件Select上，round_select 爲定義的樣式，包含邊框、下拉箭頭等
2 {...this.props} 接收父組件上全部屬性

代碼如下：

/*
* @Date 2020/5/8
* @Author zuolinya
* @Description antd select組件 二次封裝
* 1 設置爲圓角
* 2 箭頭顏色 #356FFF
*/
import React from "react";
import { Select } from "antd";
import './index.less'

class JrSelect extends React.Component<any> {

  constructor(props: any) {
    super(props);
  }

  render() {
    const { className } = this.props
    return (
      <Select {...this.props} className={`${className} round_select`}>
        {this.props.children}
      </Select>
    );
  }
}

export default JrSelect;

less部分實現：

@import '~antd/es/style/themes/default.less';

.round_select {
  border-radius: 50%;

  .ant-select-selector {
    border-radius: 50px !important;
  }

  .ant-select-arrow {
    color: #356FFF !important;
  }
}

父組件引用：

//第一步引入組件
import JrSelect from '@/components/JrSelect';

//第二步，引用組件，使用方法同ant design Select,具體api可參考ant design 官網
class ParentComponent extends React.Component<any> {

  constructor(props: any) {
    super(props);
  }
  render() {
    return (
      <JrSelect className="fliter_select" defaultValue={''} >
		  <Option value={''} key={''}>
		     全部
		   </Option>
		   <Option value={0} key={0}>
		     品牌推廣
		   </Option>
		   <Option value={1} key={1}>
		     app拉新
		   </Option>
	 </JrSelect>
    );
  }
}

export default ParentComponent;

如有問題請聯繫我~

歡迎加入QQ羣: