Reactjs 通过数组生成html选择项列表并在render（）中调用它时，正确的方法是什么？

我的第一个想法是采用传统的方法，即在函数中以字符串形式收集所有数据，然后以

危险的ethtml

形式返回。我可以稍后在

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>
    )
}

构造函数（道具）
{
超级（道具）；
此.state={
用户：[{..}，{..}，{..}，{..}]，
信息：[{..}，{..}]
};
}
renderSelectDropdown（）
{
数据=“”
this.state.users.forEach（user=>
{   
数据+=''；
for（让项目在此.state.info中）
{
this.state.info[user.name][item].forEach（s=>{
数据+=''+s+''；
})
}
数据+=“”
});
数据+=''；
返回{uuuhtml:data}；
}
render（）
{
返回(
)
}

反应方式就是这么简单

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

{this.state.users.map（user=>{
返回{user.prop}

})}

试试这个：

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>
    )
 }

renderSelectDropdown（）{
让列表=[]；
this.state.users.forEach（（user，idx）=>
{   
让opt=this.state.info.map（（项目）=>{
this.state.info[user.name][item].map（（s，key）=>{
{s} )；
})
});
list.push（{opt}）；
});
退货清单；
}
render（）{
let list=renderSelectDropdown（）；
返回(
{list}
)
}

太好了！事实上，有一个错误。忘记设置每个选项的值。这应该是：

{s}非常感谢，胜利！