Javascript 没有子项时删除图标

我正在使用Material UI中的TreeView组件构建一个TreeView：

我已经创建了下面的组件，当节点展开时，该组件将获取数据。此外，树是构建的，因此每个有子节点的节点也是一个

MyTreeItem

树，但我有一个问题：

当我到达不再有子对象的点时，我想删除/隐藏展开/折叠图标。我怎样才能做到这一点

import ReactDOM from "react-dom";
import React from "react";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TreeItem from "@material-ui/lab/TreeItem";
const { useState, useCallback } = React;

export default function MyTreeItem(props) {
  const [childNodes, setChildNodes] = useState(null);
  const [expanded, setExpanded] = React.useState([]);

  function fetchChildNodes(id) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          children: [
            {
              id: "2",
              name: "Calendar"
            },
            {
              id: "3",
              name: "Settings"
            },
            {
              id: "4",
              name: "Music"
            }
          ]
        });
      }, 1000);
    });
  }

  const handleChange = (event, nodes) => {
    const expandingNodes = nodes.filter(x => !expanded.includes(x));
    setExpanded(nodes);
    if (expandingNodes[0]) {
      const childId = expandingNodes[0];
      fetchChildNodes(childId).then(
        result =>
          result.children
            ? setChildNodes(
                result.children.map(node => (
                  <MyTreeItem key={node.uuid} {...node} action={props.action} />
                ))
              )
            : console.log("No children") // How do I remeove the expand/collapse icon?
      );
    }
  };

  return (
    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      expanded={expanded}
      onNodeToggle={handleChange}
    >
      {/*The node below should act as the root node for now */}
      <TreeItem nodeId={props.id} label={props.name}>
        {childNodes || [<div key="stub" />]}
      </TreeItem>
    </TreeView>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyTreeItem id="1" name="Applications" />, rootElement);

从“react-dom”导入ReactDOM；
从“React”导入React；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/icons/ExpandMore”导入ExpandMoreIcon；
从“@material ui/icons/ChevronRight”导入ChevronRightIcon；
从“@material ui/lab/TreeItem”导入TreeItem；
const{useState，useCallback}=React；
导出默认函数MyTreeItem（道具）{
常量[childNodes，setChildNodes]=useState（null）；
const[expanded，setExpanded]=React.useState（[]）；
函数fetchChildNodes（id）{
返回新承诺（解决=>{
设置超时（（）=>{
决心({
儿童：[
{
id:“2”，
名称：“日历”
},
{
id:“3”，
名称：“设置”
},
{
id:“4”，
名称：“音乐”
}
]
});
}, 1000);
});
}
常量handleChange=（事件、节点）=>{
const expandingNodes=nodes.filter（x=>！expanded.includes（x））；
集合（节点）；
if（展开节点[0]）{
const childId=expandingNodes[0]；
fetchChildNodes（childId）。然后(
结果=>
结果：儿童
？设置子节点(
result.children.map（节点=>(
))
)
：console.log（“无子项”）//如何重新移动展开/折叠图标？
);
}
};
返回(
{/*下面的节点现在应充当根节点*/}
{childNodes | |[]}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

这是由TreeItem组件自动完成的。只要它没有任何子项，它就不会有折叠/展开图标

---

在您的情况下，图标始终显示，因为

[]

。您应该动态决定何时添加图标或不启用图标。

这由TreeItem组件自动完成。只要它没有任何子项，它就不会有折叠/展开图标

---

在您的情况下，图标始终显示，因为

[]

。您应该动态决定何时添加或不启用图标。

您可以在没有子节点时执行

setChildNodes（null）

（即，将其替换为

console.log（“无子节点”）

）并删除存根，以便在

childNodes

为

null

时不显示图标：

  <TreeItem nodeId={props.id} label={props.name}>
    {childNodes}
  </TreeItem>

{childNodes}

您可以在没有子节点时执行

setChildNodes（null）

（即，将其替换为

console.log（“无子节点”）

）并删除存根，以便在

childNodes

为

null

时不显示图标：

  <TreeItem nodeId={props.id} label={props.name}>
    {childNodes}
  </TreeItem>

{childNodes}

谢谢，这很有道理。您对如何动态添加它有什么想法吗？谢谢，这很有意义。您知道如何动态添加它吗？但是这会删除根节点的图标：“应用程序”，所以我无法添加expand@John这不正是你想要实现的吗？当节点没有子节点时删除展开图标？这基本上是我想要的，但在删除图标之前，我需要检查节点是否有子节点。当从根节点中删除展开图标时，

fetchChildNodes

将永远不会运行，并且我无法确定该节点是否有子节点。希望我的解释不会混淆。哦，我明白了。在这种情况下，可以使用存根作为

childNodes

的初始值。谢谢，这正是我要找的。但是这会删除根节点的图标：“应用程序”，所以我不能expand@John这不正是你想要实现的吗？当节点没有子节点时删除展开图标？这基本上是我想要的，但在删除图标之前，我需要检查节点是否有子节点。当从根节点中删除展开图标时，

fetchChildNodes

将永远不会运行，并且我无法确定该节点是否有子节点。希望我的解释不会混淆。哦，我明白了。在这种情况下，可以使用存根作为

childNodes

的初始值。谢谢，这正是我想要的。