reactjs - 如何以编程方式在 Material Ui 中展开或折叠树项?
问题描述
有没有办法以编程方式扩展和折叠材质 ui 中的树项?我可以通过单击项目来做到这一点,但有时我想根据树视图中的操作折叠和展开树项目。可能吗?
解决方案
You can achieve that using TreeView expanded
prop.
The code below expands the TreeItem with id "1" on mount.
import React, {useEffect, useState} 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';
export default function FileSystemNavigator() {
const [expanded, setExpanded] = useState([]);
useEffect(() => {
setExpanded(["1"])
},[])
return (
<TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
expanded={expanded}
>
<TreeItem nodeId="1" label="Applications"
>
<TreeItem nodeId="2" label="Calendar" />
<TreeItem nodeId="3" label="Chrome" />
<TreeItem nodeId="4" label="Webstorm" />
</TreeItem>
<TreeItem nodeId="5" label="Documents"
>
<TreeItem nodeId="6" label="Material-UI">
<TreeItem nodeId="7" label="src">
<TreeItem nodeId="8" label="index.js" />
<TreeItem nodeId="9" label="tree-view.js" />
</TreeItem>
</TreeItem>
</TreeItem>
</TreeView>
);
}
推荐阅读
- hive - 为什么创建表和创建函数需要不同的权限
- mysql - 查询以选择直到某个日期的天数
- react-native - 如何动态更改视频组件的uri值
- android - 如果范围是用于游戏的 google api,则 React Native Google Signin 返回已取消
- dart - 在 Flutter / Dart 中减小视频文件大小
- highcharts - Highcharts yAxis 点的瀑布低值
- java - 如何从 Firebase 数据库中检索多个数据?
- python - Python + Selenium:将新值插入下拉菜单
- scala - 如何在scala中将Any更改为Array?
- scala - 用于融合平台的 sbt 解析器