材质UI树状视图，检查我单击的节点是否有子节点

Question

所以我试图使用"材质UI中的树状视图"创建一个树(https://material-ui.com/components/tree-view/)。我们可以从他们的页面上举一个例子：

const data = {
id: 'root',
name: 'Parent',
children: [
{
id: '1',
name: 'Child - 1',
},
{
id: '3',
name: 'Child - 3',
children: [
{
id: '4',
name: 'Child - 4',
},
],
},
],
};
const useStyles = makeStyles({
root: {
height: 110,
flexGrow: 1,
maxWidth: 400,
},
});
export default function RecursiveTreeView() {
const classes = useStyles();
const renderTree = (nodes) => (
<TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
{Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null}
</TreeItem>
);
return (
<TreeView
className={classes.root}
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpanded={['root']}
defaultExpandIcon={<ChevronRightIcon />}
>
{renderTree(data)}
</TreeView>
);
}

我想做的是，每当我点击一个节点时，只有当它是一个叶节点时，才触发一些函数。"；onNodeSelect"；树视图中的props只提供了节点id，而没有提供任何其他关于节点的信息。我知道一种方法是在原始json中搜索该id，找到节点，然后检查它是否有子节点，但我的json很大，我不想这么做。还有别的办法吗？

Answer 1

您可能会使用TreeItem组件的onLabelClick；选择"；树视图的一部分(例如，在树视图上使用disableSelection(。

然后你的代码可能会变成

const handleTreeItemClick = (node) => {
if( node.children && node.children.length ) {
// do some stuff
} else {
// do something else
}  
}
const renderTree = (nodes) => (
<TreeItem
key={nodes.id}
nodeId={nodes.id}
label={nodes.name}
onLabelClick={() => handleTreeItemClick(nodes)}
>
{Array.isArray(nodes.children) ? nodes.children.map((node) => renderTree(node)) : null}
</TreeItem>
);

否则，您可能可以使用指向数据节点的id对数据进行散列(不确定对大型json对象进行散列的性能？(，然后只从散列中查找值，而不是每次都进行搜索。烦人我知道例如

// do this outside of the render, perhaps in a redux selector or reducer
const hashMethod = (nodes, hash = {}) => {
return nodes.reduce((h, node) => {
h[node.id] = node;
if( node.children) {
h = hashMethod(node.children, h);
}  
return h;
}, hash);
}
// sorry turned it into an array first so I can use reduce easier
const hashedData = hashMethod([data]); 

然后在组件内的onNodeSelect处理程序中(对于单选(

const handleNodeSelect = (nodeId) => {
const node = hashedData(nodeId);
// do what you need with the data
}