将自定义 data- 属性添加到选项组件react-select

Question

我正在使用反应选择库为我的下拉可搜索组件创建一个测试。在自定义该组件时，
我无法data-testid向组件添加属性，因为它是在反应选择文档中定义的。Option

该data-testid属性不会显示在Option元素的 DOM 中。

选项组件

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

const CustomOption = (props: OptionProps<SearchDropdownOption, false>) => (
  <components.Option {...props} data-testid="test-id" />
);

例如，我成功使用了DOM 中显示Input的下拉列表和属性的搜索版本组件：data-testid

输入组件

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

const CustomInput = (props: InputProps<SearchDropdownOption, false>) => (
  <components.Input {...props} data-testid="test-id" />
);

而不是在Select组件中使用它：

<Select<SearchDropdownOption, false>
  components={{
    Input: CustomInput,
    Option: CustomOption,
  }}
  isSearchable={isSearchable}
/>

Answer 1

不可能像我为组件所做的那样data-testid直接向组件添加自定义属性。我需要使用 HTML元素或任何其他元素扩展此组件，并将此属性直接添加到该元素：OptionInputspan

const CustomOption = (props: OptionProps<SearchDropdownOption, false>) => {
  return (
    <components.Option {...props}>
      <span data-testid="test-id" key={props.innerProps.key}>
        {props.data.label}
      </span>
    </components.Option>
  );
};

注意 这个key属性很重要，因为它为元素提供了常规 React 唯一性，并且可以从react-select 的innerProps属性中使用该值：

key={props.innerProps.key}