更改React中的选择框按钮文本

Question

所以我有一个 JSON 数组，其中对象如下所示 -

[
    {
      "country_code": "AF",
      "country_name": "Afghanistan",
      "country_flag": "🇦🇫",
      "phone_number_code": "+93",
    },
    {
      "country_code": "AL",
      "country_name": "Albania",
      "country_flag": "🇦🇱",
      "phone_number_code": "+355",
    },
    ...
]

所以我有一个选择和选项标签，我想以这种方式渲染。

1. 标签应为 - 国家标志 + 电话号码_代码 + 国家名称
2. 值应为 - 电话号码_代码
3. 从选择按钮的下拉列表中选择后的值应为 -country_flag + Phone_number_code。

我一直致力于实现此功能。标签和值我明白该怎么做。如何实现第三点？就像我尝试通过操作 DOM 一样，但我认为这不是 React 中的正确方法。任何帮助或指导将不胜感激。

Answer 1

我认为实现此类目标的好方法是使用 .map 函数从该数据创建组件。

例如：

import countries from './countries.json'

const SelectComponent = () => {
   return (
      <>
          <label for="country-select">Choose a country: </label>
          <select id="country-select">
              {countries.map(country => (
                  <option key={country.country_code value={country.phone_number_code}>{country.contry_flag} {country.phone_number_code} {country.country_name} />
              )}
          </select>

      </>
   }

希望这有帮助！