在React中循环数组以在函数中构建html-select项列表并在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

react方法就是这样简单的

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