javascript - 将 optionRenderer 与 Select.Aysnc 结合使用( react 选择)

Question

我在文档中找不到如何将 optionRenderer 属性与react-select async (Select.Async)一起使用

here is a question已经回答了，但是 renderOptions 根本没有被调用

这是我的代码片段:

renderOption = (option) => {
    return (
        <div>
            // for example:
            {option.label}: {option.value}
        </div>
    )
}


<Select.Async
    placeholder={placeholder}
    loadOptions={(inputValue) => this.asyncLoadOptions(inputValue)}
    isClearable
    onChange={(value, e) => {
      this.onDropDownFilterChange(value, e)
    }}
    onMenuScrollToBottom={this.fetchDropDownNextPage}
    defaultOptions={defaultOptions}
    defaultValue={defaultValue}
    styles={this.props.hasError ? customStyles : undefined}
    optionRenderer={this.renderOption}

/>

在这里，我想按原样保留每个下拉项目的功能和样式(例如 onMouseOver 等)，我只想格式化项目在列表中的显示方式，那么这是正确的方法吗？或者除了使用 components 属性之外没有其他选择。

我能够使用 components 属性实现正确的格式化，但我丢失了样式和所有鼠标事件。

Answer 1

所以对于那些正在寻找答案的人来说，这就是我最终使用的并且它完成了工作:(不相关的代码已被删除以保持代码片段简洁)

import AsyncSelect  from 'react-select/async';
import { components } from 'react-select';

const Option = props => {
    return (
        <components.Option {...props} >
            {props.data.label}<br/>
            <small style={{color: 'gray'}}>
                {props.data.manufacturerName || 'Unknown'} | {props.data.assetGroupDescription || 'Unknown'}
            </small>
        </components.Option>
    )};

class FilterDropDownMenu extends Component {

render() {
    return (
        <>
            <label htmlFor={id}>{translate(placeholder)}</label>
            <AsyncSelect
                {...this.props}
                isClearable
                onChange={(value, e) => {
                    this.onDropDownFilterChange(value, e)
                }}
                onMenuScrollToBottom={this.fetchDropDownNextPage}
                defaultOptions={defaultOptions}
                defaultValue={defaultValue}
                styles={hasError ? customStyles : undefined}
                components={{ Option }}
            />
        </>
    )
   }
}

这样，我就可以获得我想要的格式，并且不会失去 react 选择的内置功能(鼠标事件和样式等)。