Html 从给定数组中选择选项未显示

Question

我正在开发一个 React 应用程序。我有多个选择标签和不同的选项要显示，我编写了一个函数来接收选项并返回整个选择标签。我从 render() 方法多次调用这个函数。我想重用代码。由于某些原因，选择选项并没有显示。

我的代码是这样的：

DisplayMenu = (id, options) => {

let menu = <div className="model"> Model 
                 <select id={id}>
                   {
                     this.options.map( (item, index) => {
                       <option value={index}>{item}</option>
                     })
                   }
                 </select>
               </div>
return menu;


}

render(){
   
   return (
      <div id="main">
           // other <p> elements here
           <Collapsible trigger="Actors">
             {this.DisplayMenu("FirstActor", this.props.Details["FirstActor"])}
             {this.props.Details["OtherActors"].map ( ( item, index) => 
               this.DisplayMenu("OtherActor" + index, item)
               )}
           </Collapsible>

         //oher <button> tags here

         </div>      


)
}

函数显示选择标签，但选项为空。我的数组很好，我检查了值。我认为原因可能是标签的 z-index 值，我试图对其进行更改，但仍然没有显示任何内容。同样在浏览器控制台中显示：

<select id="FristActor model "></select> ==$0

任何想法都会有所帮助。谢谢。

Answer 1

抱歉，由于声誉较低，我无法发表评论。

如果您不想写返回，请更新 Kumar 的答案。

<select id={id}>
   {
     this.options.map( (item, index) => (
       <option value={index}>{item}</option>
     ))
   }
 </select>

谢谢。

Answer 2

您没有从地图功能返回

<select id={id}>
   {
     this.options.map( (item, index) => {
       return <option value={index}>{item}</option>
     })
   }
 </select>