React中的正確方法是循環訪問一個數組，以在函數中構建html選擇項目列表並在render（）中調用它？

Question

我的第一個想法是以傳統的方式進行，即將所有數據作爲字符串收集並返回爲dangerouslySetHtml。我可以稍後在render()中將此函數稱爲{this.renderList()}。我該如何做「反應方式」，即在方法中構建JSX元素並在render（）中實現它？以下是我如何處理這種情況的隨機示例。

constructor(props) 
{ 
    super(props); 
    this.state = { 
    users: [{..}, {..}, {..}], 
    info: [{..}, {..}] 
    }; 
} 

renderSelectDropdown() 
{ 
    data = '<select>' 

    this.state.users.forEach(user => 
    { 
     data += '<optgroup label={user.title}>'; 
     for (let item in this.state.info) 
     { 
      this.state.info[user.name][item].forEach(s => { 
       data += '<option>'+ s +'</option>'; 
      }) 
     } 
     data += '</optgroup>' 
    }); 

    data += '</select>'; 

    return {__html: data}; 
} 

render() 
{ 
    return (

     <div> 
      <input type="text" name="name"> 
      <div dangerouslySetInnerHTML = this.renderSelectDropdown()></div> 
     </div> 
    ) 
} 

Answer 1

試試這個：

renderSelectDropdown() { 
    let list = []; 

    this.state.users.forEach((user, idx) => 
    { 
     let opt = this.state.info.map((item) => { 
      this.state.info[user.name][item].map((s, key) => { 
       <option key={key}>{s}</option>; 
      }) 
     }); 

     list.push(<optgroup key={idx} label={user.title}>{opt}</optgroup>); 

    }); 

    return list; 
} 

render() { 
    let list = renderSelectDropdown(); 

    return (
     <div> 
      <input type="text" name="name"> 
      <select> 
       {list} 
      </select> 
     </div> 
    ) 
} 

Answer 2

的反應方式是這樣的簡單

<div> 
{this.state.users.map(user => { 
    return <p> {user.prop} </p> 
})} 
</div>