ReactJS：展开后如何折叠Material UI TreeView？答案

【问题标题】：ReactJS: How to collapse Material UI TreeView after expanding?ReactJS：展开后如何折叠Material UI TreeView？
【发布时间】：2021-05-19 12:06:27
【问题描述】：

我有一个材质 UI treeView。当我扩展它时，它会遇到一个 API。但按下展开按钮后，treeView 节点仍处于打开状态。我尝试过使用onNodeToggle，但似乎没有任何效果。

这是我的代码：

<TreeView
  className={classes.root1}
  defaultExpandIcon={<ArrowDropDownIcon />}
  defaultCollapseIcon={<ArrowDropUpIcon />}
  defaultEndIcon={<ArrowDropDownIcon />}
  disableSelection={true}
  expanded={expanded}
  collapsed={expanded}
>
  {renderTree(row, index)}
</TreeView>;

如何折叠它？有什么解决办法吗？是否可以在 Material UI treeView 中使用？

【问题讨论】：

你能分享演示代码链接吗？
是的。我在分享
我猜答案可以在here找到答案
没有。我的问题是一旦我展开它，展开的节点永远不会崩溃。如何解决这个问题？有什么解决办法吗？我已经检查了你指向的页面

标签： javascript css reactjs jsx

【解决方案1】：

问题出在这个道具上，不是吗？

expanded={expanded}
collapsed={expanded}

collapsed 不在文档中
expanded 是展开项的数组。如果您想折叠项目，只需将其从该数组中移除即可。

受控的 TreeView 文档 https://material-ui.com/components/tree-view/#ControlledTreeView.js

【讨论】：

它不适用于折叠。你能创建一个沙盒吗？？？
问题是我无法折叠它。 useState 用于设置每个节点展开的数据。当 API 命中时，它会更改状态并显示节点。但是我正在使用的是，在折叠其他节点时，我正在显示所有节点，无论它处于何种状态。因此，一次扩展一个节点。我想展开一个节点并折叠其他节点。一旦我展开它，我就无法再次折叠它。你有什么解决办法吗？？
如果你使用expanded prop这意味着你用它来控制哪些节点被展开（id数组），所以如果你想折叠一些节点，你必须自己控制它。（发送到新扩展项目的扩展道具数组=从中删除折叠的项目）
尝试记录这个数组或手动更新它并观察它的行为。