在 React 里实现国旗下拉菜单

IT俱乐部-码出人生

Dec 16, 2020react10点击

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

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

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

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

找到了 react-country-flag 这个库

<ReactCountryFlag
             countryCode="US"
             svg
       />

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

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

就考虑换一个库试试

就找到了 react-world-flags

使用起来非常简单

<Flag code={ code } />

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

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

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

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

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

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

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

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

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

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

原文作者: dgb8901,yinxing
原文链接: https://www.itwork.club/2020/12/16/flag-select/
版权声明: 转载请注明出处

体验小程序「简易记账」

关注公众号「特想学英语」

Recommend