如何为react-select组件的选项传递动态自定义ID？

首先你需要修正你的options数组——JavaScript对象里重复的属性键会被覆盖，所以得把自定义ID放到单独的字段里，比如customId：

const options = [
  { value: 'lease', label: 'Lease', customId: 'ownership-details-option-lease' },
  { value: 'own', label: 'Own', customId: 'ownership-details-option-own' }
];

接下来通过react-select的components属性自定义Option组件，把自定义ID绑定到选项元素上：

import Select, { components } from 'react-select';

// 自定义Option组件
const CustomOption = ({ innerProps, data, ...props }) => {
  return (
    <components.Option
      {...props}
      innerProps={{
        ...innerProps,
        id: data.customId // 将自定义ID赋值给option元素的id属性
      }}
    />
  );
};

最后在Select组件中使用这个自定义组件：

<Select
  name='ownershipstatus'
  onChange={(e) => { /* 你的业务逻辑 */ }}
  options={options}
  components={{ Option: CustomOption }}
/>

这样渲染出来的每个选项DOM元素都会带有你指定的自定义ID，满足需求。

内容的提问来源于stack exchange，提问作者David Liang