ReactJs 在 optgroup 中显示数据

Question

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"  }]上面的代码尝试显示数据，如果键是名称，然后创建optgroup标签，否则它将显示选项值中的所有数据。在那之后，选择的值id这是<Option key= {key} >{singleData[key]}</Option>应该的内部期权价值和文字显示的是价值。有人知道怎么做吗 ：（ ？

Answer 1

对于this.props.datacatcreate an 的每个条目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>

));