现在有一个需求，要做一个 国旗的 select

emoji 国旗

很快就找到了一个叫 countries-list 的库，里面包含 emoji 格式的国旗

结合 antd 的 Select 组件，把 select 做了出来

方形国旗

但设计说国旗的形状需要是方形

找到了 react-country-flag 这个库

1
2
3
4

<ReactCountryFlag
             countryCode="US"
             svg
       />

把 ReactCountryFlag 组件加入到 Select.Option 内之后，发现「第一次点击 select 的时候，会有延迟」

当时以为延迟的原因是：react-country-flag 的国旗 src 使用的是一个 cdn 地址，而非本地文件

就考虑换一个库试试

就找到了 react-world-flags

使用起来非常简单

1

<Flag code={ code } />

但延迟的问题并没有好转……

列表渲染延迟

开始查 antd select 的延迟问题，发现并没那么简单

Long list optimization · Issue #3789 · ant-design/ant-design · GitHub

直到 v4 版本， antd 才把 long list 渲染问题优化

看了 issue 里的讨论，发现有两个解决方法

1. 更新 antd，但我的代码是 antd v2 react v15 更新起来怕是 成本高、风险大
2. 使用讨论里推荐的一个组件 SuperSelect ，尝试之后发现没未好转，还出现了双滚动条的问题，不知道是不是因为 SuperSelect 是依赖 antd v3 的原因

直接使用国旗图片

最后尝试了一下，使用本地 svg 图片作为国旗 src

就把 react-world-flags 这个 repo 下载下来（直接 download zip），找到 svg 文件目录， copy 到自己项目里

1
2
3

import flag_ZM from '@/flags/svgs/zm.svg'
import flag_ZW from '@/flags/svgs/zw.svg'
export default {flag_ZM, flag_ZW}

1
2

import flags from ‘../../../../../js/flag/flags’
<img className=‘flag_img’ src={flags[`flag_${k}`]} alt=‘’/>

这么操作之后，看上去是比「使用组件」的方式要好一点

就这样