使用 onRenderOption 进行流畅的下拉自定义渲染时出现问题 - 无法正确更新文本

Question

我有一个源自 Fluent ui Dropdown 的组件，称为 DropdownWithFilter。它使用 DebounceSearchBox 对下拉选项进行排序。我的 DropdownWithFilter 工作得很好，但我的最后一步是更改默认文本以包含项目的名称，以及下拉列表右侧的描述。现在它只显示 option.text（项目名称），这是默认行为。

我的组件：

<DropdownWithFilter
    options={this.dropdownOptions}
    onRenderOption={onRenderOption}
/>

我使用 onRenderOption 基本上是从文档中复制和粘贴的，但它根本没有更新我的组件。

private onRenderOption = (option: IDropdownOption): JSX.Element => {
    const text: string = option.text + " " + option.data;
        return (
            <div>
              <span>{text}</span>
            </div>
        );
}

最初我认为问题可能在于我将 dropdownItemList[] 转换为 IDropdownOption[] 数组，以便我可以将数据设置为我的项目描述

const dropdownOptions: IDropdownOption[] = [
    ...this.dropdownItemList.map(item => ({
        key: item.description,
        text: item.text,
        data: item.description,
    })),
];

但是，由于即使尝试用单个字符串（例如“foo”）覆盖我的项目文本也没有任何效果，所以我知道还有其他问题。可能是我的自定义组件 DropdownWithFilter 本身？

private onRenderOption = (option: IDropdownOption): JSX.Element => {
        return (
            <div>
              <span>foo</span>
            </div>
        );
}

我已经连续两天被这个问题难住了。对于我做错的事情的任何帮助将不胜感激。如果我可以提供更多代码来澄清我正在做什么，请告诉我。

从关于类似问题的预先填充的建议中，我确实看到了这一点：下拉选项的文本元素内的 Fluent UI 2 列。但是，我无法直接编辑下拉菜单，因为我正在使用派生组件，并且其他代码也使用 DropdownWithFilter。

Answer 1

哇，好吧，发布此内容可以帮助我评估我的问题可能出在哪里。我最终进一步研究了我的根组件 DropdownWithFilter，结果发现它已经有一个 onRenderOption，它覆盖了我在其实现中尝试执行的任何操作。为了解决这个问题，我创建了一个名为 DropdownWithFilterColumns 的 DropdownWithFilter 复制组件，其逻辑与 DropdownWithFilter 完全相同，只是它按照我想要的方式返回文本。谢谢你让我大声思考！