css - ReactJS+MaterialUI v1 自动嵌套列表填充
问题描述
我有嵌套列表,但我不知道有多少(递归函数)。如何使它们获得自动填充?
我得到的结果是这样的
我想得到这个结果:
如果我添加嵌套样式,它们对于所有嵌套列表都是相同的。我需要为每个下一个级别增加填充。
你能帮我吗?(欢迎大家评论!)
编码:
import React from 'react';
import {isNullOrUndefined} from "util";
import {TagNode} from "../interfaces/TagTree";
import HistoryDataUtility from "../../utilities/historyDataUtility";
import TreeUtility from "../../utilities/treeUtility";
import { createStyles } from '@material-ui/core/styles';
import { withStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';
import Collapse from '@material-ui/core/Collapse';
import Icon from '@material-ui/core/Icon';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
export interface TreeRendererProps {
itemList: TagNode[],
selectedTags: string[],
expandedFolders: string[],
onFolderToggle: any,
onTagToggle: any,
onSelectedFolderChange?: any,
selectedFolder?: string,
classes: {
root: string;
nested: string;
}
}
const styles = createStyles({
root: {
width: '100%',
},
nested: {
paddingLeft: 16
}
});
const TreeRenderer: React.StatelessComponent<TreeRendererProps> = (props) => {
const buildListItems = (item: TagNode,
selectedTags: string[],
onFolderToggle: any,
onTagToggle: any,
source: string) => {
let key = HistoryDataUtility.combineTag(source, item.objId);
let isExpanded = props.expandedFolders.indexOf(key) != -1;
let isSelected: boolean = props.selectedFolder === key ? true : false;
let children1: any, children2: any;
if(!TreeUtility.isTagItem(item)) {
children1 = item.children.filter(filterGroups).sort(sortOnTitle).map((child) => {
return buildListItems(child,
selectedTags,
onFolderToggle,
onTagToggle,
source);
}) || null;
children2 = item.children.filter(filterTags).sort(sortOnTitle).map((child) => {
return buildListItems(child,
selectedTags,
onFolderToggle,
onTagToggle,
source);
}) || null;
}
let collapseItem: any;
if(isExpanded && !isNullOrUndefined(item.children)) {
collapseItem =
<Collapse component="li" in={true} timeout="auto" unmountOnExit>
<List disablePadding>
{children1}
{children2}
</List>
</Collapse>
}
let key2 = "list" + Math.random().toString(36).substr(2, 9);
return (
!TreeUtility.isTagItem(item)
?
<div key={key2}>
<ListItem
button key={key}
className={props.classes.nested + " with-children"}
onClick={onFolderToggle.bind(this, key)}
>
<ListItemIcon>
{isExpanded ? <Icon>remove</Icon> : <Icon>add</Icon>}
</ListItemIcon>
<ListItemText primary={item.title} />
<ListItemSecondaryAction>
<Checkbox checked={isSelected} color="primary" onChange={props.onSelectedFolderChange} value={key} />
</ListItemSecondaryAction>
</ListItem>
{collapseItem}
</div>
:
<ListItem
button
className={props.classes.nested + " no-children" + ((selectedTags.indexOf(key) != -1 || selectedTags.indexOf(item.objId) != -1) ? " tagitem-activated" : "")}
key={key}
onClick={onTagToggle.bind(this, key)}
>
<ListItemIcon><Icon className="status">fiber_manual_record</Icon></ListItemIcon>
<ListItemText primary={item.title} />
</ListItem>
);
}
const filterGroups = (item: TagNode): boolean => {
return !TreeUtility.isTagItem(item);
}
const filterTags = (item: TagNode): boolean => {
return TreeUtility.isTagItem(item);
}
const sortOnTitle = (a: TagNode, b: TagNode) => {
var nameA = a.title.toUpperCase(); // ignore upper and lowercase
var nameB = b.title.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
}
const buildList = (items: TagNode[],
selectedTags: string[],
onFolderToggle: any,
onTagToggle: any) => {
let children1: any, children2: any;
children1 = items.filter(filterGroups).sort(sortOnTitle).map((item: TagNode) => {
let source = item.objId; //Use the top level group nodes id as source
return buildListItems(
item,
selectedTags,
onFolderToggle,
onTagToggle, source);
}) || null;
children2 = items.filter(filterTags).sort(sortOnTitle).map((item: TagNode) => {
return buildListItems(
item,
selectedTags,
onFolderToggle,
onTagToggle, null);
}) || null;
return (
<List>
{children1}
{children2}
</List>
)
}
let tree;
if (props.itemList.length > 0) {
if (props.itemList[0].children != undefined) {
tree = buildList(
props.itemList[0].children,
props.selectedTags,
props.onFolderToggle,
props.onTagToggle);
} else {
tree = <div>{props.itemList[0].name + ' : ' + props.itemList[0].title}</div>
}
} else {
tree = <div><h2 className="small">Model not found.</h2></div>;
}
return (<div>{tree}</div>);
}
export default withStyles(styles, { withTheme: true })(TreeRenderer);
解决方案
实际上,解决方案非常简单。只需更改此行:
<Collapse component="li" in={true} timeout="auto" unmountOnExit>
对此:
<Collapse component="li" in={true} timeout="auto" unmountOnExit style={{paddingLeft: '16px'}}>
推荐阅读
- javascript - 从数组中返回第一个可除数
- php - 无法启动/重启 PHP 7.2 FPM 服务(CentOS 7、Apache)
- html - 我想在“Markdown”发布我的“原始代码”
- python - 请问,如何从 TimeStamp 列中获取日期组件作为索引?所以我想要它没有时间
- python - 获取产品属性及其值
- amazon-web-services - 如何为 AWS ECS 服务提供环境变量?
- apache-kafka - 查看 shell 上的消费者和生产者统计信息:kafka
- git - 使用 git 将我的更改与上游代码分开
- android - 如何在android中将播放的mp3信息从activity传递到fragment
- c++ - 如何将用户输入拆分为字符和整数?