如何在reactjs中的国家名称旁边的下拉菜单中添加国旗

Question

我有一个包含两个国家的下拉菜单，希望将国家标志添加到国家名称的左侧。我选择加拿大作为默认国家。我不确定如何在中添加图像

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;

Answer 1

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

Answer 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"> { 'uD83CuDDE8uD83CuDDE6' } Canada</option>
<option value = "United States">{'uD83CuDDFAuD83CuDDF8'} 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>