使用ReactJS中的optgroup选择

我现在有以下数据：

[
    {
        "value": "G1-1",
        "text": "One",
        "optgroup": "Group 1
    },
    {
        "value": "G1-2",
        "text": "Two",
        "optgroup": "Group 1"
    },
    {
        "value": "G1-3",
        "text": "Three",
        "optgroup": "Group 1"
    },
    {
        "value": "G1-4",
        "text": "Four",
        "optgroup": "Group 1"
    },
    {
        "value": "G2-1",
        "text": "One",
        "optgroup": "Group 2"
    },
    {
        "value": "G2-2",
        "text": "Two",
        "optgroup": "Group 2"
    },
    {
        "value": "G2-3",
        "text": "Three",
        "optgroup": "Group 3"
    },
    {
        "value": "G2-4",
        "text": "Four",
        "optgroup": "Group 4"
    }
]

我将这些数据作为选项传递到我创建的一个简单下拉组件中，如下所示：

const SelectInputRound = ({defaultOption, name, value, onChange, options}) => {
    return (
        <select
            id={name}
            className="inputSelectRound form-control override-fc"
            name={name}
            value={value}
            onChange={onChange}>
            <option className="defaultOption" value="">{defaultOption}</option>
            {
                options.map((option) => {
                    return <option key={option.value} value={option.value}>{option.text}</option>;
                })
            }
        </select>
    );
};

const SelectInputRound=（{defaultOption，name，value，onChange，options}）=>{
返回(
{defaultOption}
{
options.map（（选项）=>{
返回{option.text}；
})
}
);
};

我现在的问题是，我不确定如何对选项进行分组并将其传递给控件，以便在组件中显示optgroup

我现在的问题是，我不确定如何对选项进行分组并将其传递给控件，以便在组件中显示optgroup

在将数据传递到您的

下拉列表

组件之前，您可以先对其进行转换，以便对数据进行相应的分组。比如说像这样

const选项=[
{
值：“G1-1”，
正文：“一”，
optgroup：“组1”
},
{
值：“G2-2”，
文本：“两个”，
optgroup：“第2组”
},
{
值：“G2-3”，
正文：“三”，
optgroup：“第3组”
},
{
值：“G2-4”，
正文：“四”，
optgroup：“第4组”
}
];
常量groupedOptions={}；
options.forEach（option=>{
如果（！groupedOptions[option.optgroup]）groupedOptions[option.optgroup]=[]；
GroupeOptions[option.optgroup].push({
value:option.value，
text:option.text
});
});
console.log（groupedOptions）这是一个非常详细的答案。非常感谢你抽出时间把它放得这么好。