我正在使用react-select庫為我的下拉可搜索組件創建一個測驗。在自定義組件時，
我無法向組件添加data-testid屬性，因為它是在react-select 檔案中定義的。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中的下拉串列和屬性顯示的搜索版本組件上取得了成功：Inputdata-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}
/>
uj5u.com熱心網友回復：
像我對組件所做的那樣，無法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}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/457510.html