ReactJs 在 optgroup 中显示数据答案

【问题标题】：ReactJs display data in optgroupReactJs 在 optgroup 中显示数据
【发布时间】：2020-02-27 09:33:13
【问题描述】：

this.props.datacat.map(singleData=>{
  return Object.keys(singleData).map((key,i) =>{
     if(key==='name'){
        return <OptGroup label  = {singleData[key]}>
     }else{
        return <Option key= {key} >{singleData[key]}</Option> 
     }
        return </OptGroup>
  })
})

（this.props.datacat）的数据

[
  {
    "4967": "Others.",
    "4968": "Sports & Beachwear > Others.",
    "4969": "Lingerie & Nightwear > Others.",
    "4971": "Pants & Shorts > Others.",
    "name": "Women Clothes"
  },
  {
    "4798": "Supplements > Others.",
    "4802": "Men's Grooming > Others.",
    "4952": "Others.",
    "4953": "Medical Supplies > Others.",
    "4954": "Personal Pleasure > Others.",
    "4955": "Personal Care > Others.",
    "4956": "Pedicure & Manicure > Others.",
    "6647": "Lips > Lip Tint"
    "name": "Health & Beauty"
  }
]

如果键是 name 则尝试显示数据的上述代码然后创建 optgroup 标签，否则它将显示选项值中的所有数据。之后，选项值 id 即 <Option key= {key} >{singleData[key]}</Option> 应该在选项值内，显示的文本就是该值。任何人都知道如何做到这一点:(？

【问题讨论】：

标签： javascript reactjs ant-design-pro

【解决方案1】：

为this.props.datacat 的每个条目创建一个OptGroup，然后使用该条目的所有选项填充它，除了带有键name 的选项：

this.props.datacat.map((singleData) => (
  <OptGroup label={singleData["name"]}>
    {Object.keys(singleData)
      .filter(key => key !== "name")
      .map(key => (
        <Option key={key}>{singleData[key]}</Option>
      ))}
  </OptGroup>
));

Demo

【讨论】：