antdv a-select如何设置显示label

对于 antdv 的 a-select 组件，可以通过设置 options 数组中的 label 属性来显示选项的 label 文本。示例代码如下：

import { useState } from 'react';
import { Select } from 'antd';

const SelectOption = Select.Option;

const options = [
  { value: 'apple', label: '苹果' },
  { value: 'banana', label: '香蕉' },
  { value: 'orange', label: '橙子' },
];

function App() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (value) => {
    setSelectedValue(value);
  };

  return (
    <Select value={selectedValue} onChange={handleChange}>
      {options.map((option) => (
        <SelectOption key={option.value} value={option.value}>
          {option.label}
        </SelectOption>
      ))}
    </Select>
  );
}

以上代码中，`options` 数组中的每一项都包含了 `value` 和 `label` 两个属性，其中 `value` 代表选项的值，`label` 代表选项的显示文本。在 `Select` 组件中，通过遍历 `options` 数组，动态生成 `SelectOption` 组件，并将 `value` 和 `label` 分别赋值给 `value` 和子元素，这样就可以在页面上显示出来。当用户选择某个选项时，会触发 `onChange` 事件，并将选中的 `value` 值传递给 `handleChange` 回调函数。在这个函数中，我们可以更新 `selectedValue` 状态值，以便显示用户选择的选项的文本。