React + Antd 填坑（一）如何解决antd中 Select选择器下的属性【suffixIcon】不生效的问题

无意之中在网上看到有同学提问关于 antd 下 Select 的 suffixicon不生效的问题，看到最后也没有给出一个肯定的答案，所以专门就这个问题给自己做个笔记，另外也可能会帮助到一部分同学能够快速的解决问题。

废话不多说，直接上解决方案，总共有两种解决方式：

第一种：自定义SVG图标并作为一个组件使用

import React, { Component } from 'react'
import { Select } from 'antd';
import Icon from '@ant-design/icons';

const { Option } = Select;

// 自定义一个SVG图标
const HeartSvg = () => (
    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
      <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
    </svg>
);

export default class MyHome extends Component {
    render() {
        return (
            <div className="wrapper">
                <Select suffixIcon={<Icon component={HeartSvg}/>} showArrow style={{width: 120}}>
                    <Option title="a" value="a">aa</Option>
                    <Option title="b" value="b">bb</Option>
                    <Option title="c" value="c">cc</Option>
                    <Option title="d" value="d">dd</Option>
                </Select>
            </div>
        )
    }
}

第二种：直接使用官网给的Icon图标

import React, { Component } from 'react'
import { Select } from 'antd';

const { Option } = Select;
// 直接引入一个icon图标
import { UserOutlined } from '@ant-design/icons';

export default class MyHome extends Component {
    render() {
        return (
            <div className="wrapper">
                <Select placeholder="自定义单选图标" suffixIcon={<UserOutlined/>} showArrow={true} style={{width: 120}}>
                    <Option title="a" value="a">aa</Option>
                    <Option title="b" value="b">bb</Option>
                    <Option title="c" value="c">cc</Option>
                    <Option title="d" value="d">dd</Option>
                </Select>
            </div>
        )
    }
}

                

展示效果：

可以看到上面的两种方案是成功换掉了向下的图标。但是以上两种解决方案都需要注意一个小细节，<Select > 标签内都写了showArrow 或者 showArrow={true}，这个是干什么的呢？我们来看一下官方的解释：showArrow 的官方解释是是否显示下拉小箭头，值类型是boolean， 默认值给的是：单选默认是true，多选默认是false。

那么在这里呢不论是单选还是多选我们都要设置为true，否则是不显示图标的。