将 optionRenderer 与 Select.Aysnc 一起使用（反应选择）答案

【问题标题】：Using optionRenderer with Select.Aysnc (react-select)将 optionRenderer 与 Select.Aysnc 一起使用（反应选择）
【发布时间】：2020-03-11 11:17:11
【问题描述】：

我在文档中找不到如何使用 optionRenderer prop 和 react-select async (Select.Async)

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

这是我的代码的 sn-p：

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 属性实现正确的格式设置，但我丢失了样式和所有鼠标事件。

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

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

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-select 的内置功能（鼠标事件和样式等）。

【讨论】：