如何在反应选择选项值中添加标题 tag

Question

我想动态地在React-select框选项值上添加标题，我在这里使用react-select库。

代码：

 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已在选项标签中进行

Stale RTS

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}
  />
);

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