React 中循环遍历数组以在函数中构建 html-select 项目列表并在 render() 中调用它的正确方法是什么？

Question

我的第一个想法是以传统方式进行，即将所有数据收集为函数中的字符串，然后 return 将其作为 dangerouslySetHtml。我稍后可以在 render() 中将函数称为 {this.renderList()}。我如何做到 "React Way"，即在方法中构建 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

反应方式就是这么简单

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

Answer 2

试试这个：

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

React 中循环遍历数组以在函数中构建 html-select 项目列表并在 render() 中调用它的正确方法是什么？

What is the correct approach in React to loop through an array to build html-select list of items in a function and call it in render()?

html-select

reactjs