Удаление значка, когда нет детей

Question

Я создаю TreeView с компонентом Treeview из пользовательского интерфейса материала: https://material-ui.com/components/tree-view/

Я создал компонент, ниже которого извлекает данные при расширении узла. Кроме того, дерево построено так, что каждый узел, у которого есть дочерние элементы, также является деревом 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);

Answer 1

Вы можете выполнить setChildNodes(null), когда нет дочерних элементов (т. Е. Заменить его на console.log("No children")), и удалить заглушку, чтобы значок не отображался, когда childNodes равен null:

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

Answer 2

Это делается автоматически компонентом TreeItem. Пока у него нет дочерних элементов, у него не будет значка свертывания / развертывания.

В вашем случае значок всегда отображается из-за [<div key="stub" />]. Вы должны решать динамически, когда добавлять или не включать иконку.