IT技术 - 将 optionRenderer 与 Select.Aysnc 一起使用（react选择） - 吾爱随笔录

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

这是一个已经回答的问题，但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 等）我只想格式化项目在列表中的显示方式，那么这是正确的方法吗？或者除了使用componentsprops没有其他选择。

我能够使用componentsprop实现正确的格式设置，但是我丢失了样式和所有鼠标事件。

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