如何在反应选择选项值标签中添加标题<Div>

Question

我想动态地在反应选择框选项值上添加标题，我在这里使用反应选择库。

法典：

import * as React from 'react'; import Select from 'react-select';
import { Dispatch } from 'redux';
import { QUICK_FILTER_TYPES } from '../../constants';
import { setQuickFilters } from '../../redux/actions';
import reactSelectStyles from '../../styles/react-select-styles';
import { IValueLabelTitleObject } from '../../typedefs/interfaces';
const **options** = [ QUICK_FILTER_TYPES.STALE_RTS,
QUICK_FILTER_TYPES.MISSING_RTS, QUICK_FILTER_TYPES.STALE_DPUL,
QUICK_FILTER_TYPES.MISSING_DPUL,
QUICK_FILTER_TYPES.STALE_DELIVERY_FORECAST,
QUICK_FILTER_TYPES.MISSING_DELIVERY_FORECAST,
QUICK_FILTER_TYPES.LATE_DELIVERIES, QUICK_FILTER_TYPES.UPCOMING_RTS,
QUICK_FILTER_TYPES.UPCOMING_DPUL,
QUICK_FILTER_TYPES.UPCOMING_DELIVERIES,
].map(v => ({ value: v, label: v, title: v })); 
<Select
isMulti menuIsOpen name="quick-filter-select"
onChange={selectedValues => props.dispatch(
setQuickFilters(selectedValues as IValueLabelTitleObject[]) ) }
**options={options}** placeholder="Quick filters"
styles={reactSelectStyles()} value={props.quickFilters} />

它自动添加 Div 已在选项标签中制作

陈旧的即时战略

Answer 1

似乎下面的代码片段可以帮助您。

const Option = (props) => {
return (
<Tooltip content={'Customise your option component!'} truncateText>
<components.Option {...props}/>
</Tooltip>
);
};
export default () => (
<Select
closeMenuOnSelect={false}
components={{ Option }}
options={options}
/>
);

有关更多详细信息，请阅读自定义选项文档中的 react-select 文档