如何在反应 js 中将国旗添加到国家名称旁边的下拉菜单？答案

【问题标题】：How can I add a country flag to drop down menu next to counrty name in reactjs?如何在反应 js 中将国旗添加到国家名称旁边的下拉菜单？
【发布时间】：2021-07-20 23:36:31
【问题描述】：

我有一个包含两个国家/地区的下拉菜单，我想在国家名称左侧添加国旗。我选择加拿大作为默认国家。我不确定如何添加图片。

my code :
class Country  extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "Canada" };
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <select value={this.state.value} onChange={this.handleChange}>
          <option value="Canada">Canada</option>
          <option value = "United States">United States</option>
        </select>
      </form>
    );
  }
}

export default Country;

【问题讨论】：

选择元素不会显示图像。所以不可能
你有什么建议我还能做什么？
编写您自己的选择元素或使用成千上万个元素之一。

标签： javascript html reactjs image

【解决方案1】：

如果您不想创建自己的国家标志库，可以使用 https://www.npmjs.com/package/react-flags-select 之类的东西

【讨论】：

【解决方案2】：

在这里我使用了表情符号而不是图片，我不知道这会有多大帮助：

class Country  extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "Canada" };
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <select value={this.state.value} onChange={this.handleChange}>
          <option value="Canada"> { '\uD83C\uDDE8\uD83C\uDDE6' } Canada</option>
          <option value = "United States">{'\uD83C\uDDFA\uD83C\uDDF8'} United States</option>
        </select>
      </form>
    );
  }
}

ReactDOM.render(
  <Country/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：