如何使用嵌套对象数组创建多级下拉列表

Question

我是Reactjs的新手。目前，我想从服务器获取的嵌套对象数组中渲染多级下拉菜单，如下图所示。

下面是数据的示例结构（我需要在其中填充多级下拉菜单）。

 const data = [
       {"meshes":[0,1,2,3,4,5,6,7,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"name":"","parent":0},
       {"name": "hello world","somename":0},
       {"name": "world","somename":0},
       {"name": {"name1": "hello" },"somename":0},
       ];

我想检索名称并将其放在上图中的父级和子级（多级下拉列表）中。以下是我尝试在基本下拉菜单中列出的内容。

class List extends React.PureComponent {
    constructor() {
    super();
 }



list(data) {
    const children = (name) => {
      if (name) {
       return <option>{ this.list(name) }</option>
        }
  };

  return data.map((node, index) => {
      return <Item key={ index } name={ node.name } >
      </Item>
  })
  }
render() {
    return <select>
        { this.list(this.props.data) }

        </select>
        }
       }
class Item extends React.Component {
       render() {
       return <option>
         { this.props.name }


           </option>
          }
          }
<List data={ data } />

如果我有对象数组，这可以很好地工作，但是在某些情况下，名称可以再次成为对象，并且具有需要检索的名称并将其放在其父名称下。

有人可以帮我吗？谢谢