将自定义数据属性添加到 Option 组件 react-select

Question

我正在使用 react-select 库为我的下拉可搜索组件创建一个测试。
在自定义 react-select documentation.

中定义的组件时，我无法将 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" />
);

例如，我有一个成功，Input 组件用于下拉列表的搜索版本，data-testid 属性显示在 DOM :

输入组件

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

无法像我对 Input 组件所做的那样将自定义属性 data-testid 直接添加到 Option 组件。我需要使用 HTML span 元素或任何其他元素扩展此组件，并将此属性直接添加到该元素：

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 属性:[=18= 中使用它的值]

key={props.innerProps.key}

将自定义数据属性添加到 Option 组件 react-select

Add custom data- attribute to Option component react-select

testing

components

reactjs

react-select