如何在PhoneInput组件中同时显示国家旗帜与国家名称？

当然可以实现，大多数主流PhoneInput组件库都支持同时展示国旗和国家名称，以下是两种常见的实现方案：

方案一：使用内置属性快速开启 #

如果你的PhoneInput基于react-phone-input-2这类主流库，直接添加showCountryName属性即可：

<PhoneInput  
  className="bcont" 
  value={user.bcontact} 
  onChange={bcontact => setUser({ bcontact })}
  showCountryName={true}
/>

方案二：自定义渲染国家选项 #

如果内置属性不适用（比如使用其他组件库），可以通过自定义渲染函数手动组合国旗与国家名称：

<PhoneInput  
  className="bcont" 
  value={user.bcontact} 
  onChange={bcontact => setUser({ bcontact })}
  renderCountryOption={(country) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <img src={country.flag} alt={country.name} />
      <span>{country.name}</span>
    </div>
  )}
/>

不同组件库的属性命名可能略有差异，但核心逻辑都是通过内置配置或自定义渲染，将国旗与国家名称组合展示。

内容的提问来源于stack exchange，提问作者Divya Agarwal