react-select 中的嵌套下拉菜单答案

【问题标题】：Nested dropdown in react-selectreact-select 中的嵌套下拉菜单
【发布时间】：2020-09-16 13:08:32
【问题描述】：

我正在使用 react-select 来呈现下拉菜单。呈现下拉菜单的选项如下所示

 [
    {   
        text:'Fruit',
        value:'mango'
        level: 0
    },
    {   
        text:'Seasonal',
        slug: 'saasonal',
        level: 1
    },
    {   
        text:'Orange',
        slug: 'orange',
        level: 2
    },
    {   
        text:'Mango',
        slug: 'mango',
        level: 2
    },
    {
        text: 'Winter',
        slug:'winter',
        level:1
    },
    {
        text: 'Plum',
        slug:'plum',
        level:2
    }

]

我希望下拉菜单像

Fruit   
    Seasonal
        Orange
        Mango
    Winter
        Plum

我尝试将组添加到 react-select，但组标题不可点击。我还提到了stackoverflow链接

[https://stackoverflow.com/questions/53119912/how-can-i-create-nested-option-groups-in-react-select-v2][1]
并尝试以与上面链接中发布的相同方式创建递归下拉列表，方法是将我的选项作为数据传递，但没有成功。

inside 嵌套下拉菜单的顺序基于级别。

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

react-select 实际上是在 7 月份才内置了这个功能。

Here's the pull request where they implemented it.

Here's a working example from the pull request page.

我不确定它是否已经进入 master 分支，但如果示例代码不适用于您正在使用的版本。

编辑：从头开始，您希望组标题可单击。我不认为这是这次提交的一部分。

【讨论】：