基于react antDesign 封装一个简单的Select组件

基于react antDesign 封装一个简单的Select组件，可移步官网: 查看.

目的在基于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群: