javascript - Material UI：显示不同子项的 TreeVIew Item

Question

我有一个材质 UI TreeView。我正在使用一个数组来使用 JSON 数组动态显示每个节点上的项目。

但是我使用的 JSON 在父节点中具有不同的键值。而孩子有不同的，不同的关键价值。

孩子在整个 JSON 中很常见。像这样的东西：

{
   "organizationalUnitsList":[
      {
         "organizationalUnitDistinguishName":"OU=Domain Controllers,DC=gentest,DC=com",
         "organizationalUnitId":"",
         "organizationalUnitName":"OU_Domain Controllers",
         "domainGroupList":[
            {
               "groupId":0,
               "groupName":"Genesis II",
               "groupImportedAs":"Normal",
               "groupDistinguishName":""
            }
         ]
      },
      {
         "organizationalUnitDistinguishName":"OU=erte,DC=gentest,DC=com",
         "organizationalUnitId":"",
         "organizationalUnitName":"abc2",
         "domainGroupList":[
            {
               "groupId":0,
               "groupName":"operation 22",
               "groupImportedAs":"Super",
               "groupDistinguishName":""
            },
            {
               "groupId":0,
               "groupName":"operation 25",
               "groupImportedAs":"Normal",
               "groupDistinguishName":""
            }
         ]
      }
   ]
}

到目前为止，我所做的 React 代码是：

{
  organizationalUnitsLists.map((row, index) => (
    <TreeView
      className={classes.root1}
      defaultExpandIcon={<ArrowDropDownIcon />}
      defaultCollapseIcon={<ArrowDropUpIcon />}
      defaultEndIcon={<ArrowDropDownIcon />}
    >
      {renderTree(row, index)}
    </TreeView>
  ));
}

然后在 renderTree 函数中我调用这个：

const renderTree = (row, index) => (
        <TreeView
            style={{ padding: '3px', marginLeft: 18 }}
            onLabelClick={() => handleListItemOrgClick(row, index)}
            key={row.organizationalUnitId}
            nodeId={row.organizationalUnitId}
            labelText={row.organizationalUnitName}
            labelIcon={AccountTree}
        >
            {Array.isArray(treeViewChildren.domainGroupList) ? treeViewChildren.domainGroupList.map((node) => {
                return (
                    <TreeView
                        style={{ padding: '3px', marginLeft: 18 }}
                        onLabelClick={() => handleTreeSubItems(node)}
                        key={node.groupId}
                        nodeId={node.groupId}
                        labelText={node.groupName}
                        labelIcon={AccountTree}
                    >
                        {/* {renderTree(node)} */}
                    </TreeView>
                )
            }

            ) : null}
        </TreeView>
    );

我的孩子正在展示。但它没有显示在当前节点单击上。每当我单击树视图时，孩子第一次都不会显示。但是当我进一步扩展它时，一个父母的孩子也显示在所有其他父母的孩子中。

我只想要一个父点击，它是它下面的 domainGroupList 。

谢谢你。

标签： javascriptarraysreactjsmaterial-uijsx