ReactJS+MaterialUI v1自动嵌套列表填充

我有嵌套列表,不知道有多少(递归函数)。如何使他们得到自动填充?

我得到的结果是

= :。

如果我添加嵌套样式,它们对于所有嵌套列表都是相同的。我需要为下一个级别增加填充。

你能帮忙吗?(欢迎发表评论!)

代码:

import react from'react';
从“util”导入IsNullOrUndefined;
从“.../interfaces/tagtree”导入tagnode;
从“../../utilities/historydatautility”导入historydatautility
从“../../utilities/treeutibility”导入treeutibility;

从“@material ui/core/styles”导入createstyles;
从“@material ui/core/styles”导入WithStyles;
从“@material ui/core/checkbox”导入复选框;
从“@material ui/core/collapse”导入折叠;
从“@material ui/core/icon”导入图标;
从“@material ui/core/list”导入列表;
从“@material ui/core/listem”导入列表项;
从“@material ui/core/listemicon”导入listemicon;
从“@material ui/core/listemsecondary操作”导入listemsecondary操作;
从“@material ui/core/listemtext”导入listemtext;


导出接口treerenderprops{
项目列表:tagnode[],
selectedtags:字符串[],
ExpandedFolders:字符串[],
onfoldertoggle:任何,
联系人:任何,
选择的文件夹更改?任何,
selectedFolder?字符串:
类:{
根:字符串;
嵌套:字符串;
}
}

const styles=创建样式({
根:{
宽度:“100%”,
}
嵌套:{
左图:16
}
(});

const treerenderer:react.statelesscomponent<treerendererrprops>=(props)=>。{


const buildListitems=(项:tagnode,
selectedtags:字符串[],
onfoldertoggle:任何,
联系人:任何,
源:字符串)=>。{
let key=historydatautility.combinetag(源,项.objid);
让isexpanded=props.expandedfolders.indexof(key)!=1;
设为isselected:boolean=props.selectedfolder===key?真:假;

让孩子1:any,让孩子2:any;

如果(!treeutibility.istagitem(item))。{
children=item.children.filter(filtergroups).sort(sortonTitle).map((child)=>。{
返回buildListItem(子项,
选择标签,
OnFooDutoTwitter,
本体开关
来源);
}零;
children2=item.children.filter(filtertags).sort(sortonTitle).map((child)=gt;。{
返回buildListItem(子项,
选择标签,
OnFooDutoTwitter,
本体开关
来源);
}零;
}

让折叠项:任意;
如果(i已展开&!未定义或未定义(item.children))。{
折叠项=
<collapse component=“li”in=true timeout=“auto”卸载>
<列出禁用添加>
{儿童1}
{儿童2}
&Lt/List≫
</collapse>
}

设key2=“list”+math.random().toString(36).substr(2,9);

返回(
!treeutibility.istagitem(项)
?
<DIV键=键2>
李斯特
按钮键=键
classname=props.classes.nested+“with children”
onclick=onfolderToggle.bind(this,key)
gt;
<列表项图标>
{ISO扩展?<icon>删除</icon>:<icon>添加</icon>
</ListItemIcon>
<listemtext primary=item.title/>
<Listitemsecondary操作>
<checkbox checked=isselected color=“primary”onchange=props.onselectedfolderchange value=key/>
</listemsecondary操作>
</listem>
{S塌陷项}
&L/DIV & GT;

:

李斯特
按钮
classname=props.classes.nested+“no children”+((selectedtags.indexof(key)!=-1 selectedtags.indexof(item.objid)!= -1?tagitem activated“:”“)
键= {key }
onclick=ontagtoggle.bind(this,key)
gt;
<listemicon><icon classname=“status”>光纤手动记录</icon></listemicon>
<listemtext primary=item.title/>
</listem>
;
}

const filtergroups=(item:tagnode):boolean=>。{
回来!treeutibility.istagitem(项);
}

const filtertags=(item:tagnode):boolean=>。{
返回treeutibility.istagitem(item);
}

const sortonitle=(a:tagnode,b:tagnode)=>。{
var namea=a.title.touppercase();//忽略大小写
var nameb=b.title.touppercase();//忽略大小写
if(名称a<名称b){
返回- 1;
}
if(名称a>名称b){
返回1;
}
//名称必须相等
返回0;
}

const buildList=(项:tagnode[],
selectedtags:字符串[],
onfoldertoggle:任何,
ontagtoggle:any)=>。{

让孩子1:any,让孩子2:any;

children1=items.filter(filtergroups).sort(sortonTitle).map((item:tagnode)=>。{
let source=item.objid;//使用顶级组节点id作为源
返回buildListItem(
项目,
选择标签,
OnFooDutoTwitter,
ontagtoggle,来源);
}零;

children2=items.filter(filtertags).sort(sortonTitle).map((item:tagnode)=>。{
返回buildListItem(
项目,
选择标签,
OnFooDutoTwitter,
ontagtoggle,空);
}零;

返回(
名单;
{儿童1}
{儿童2}
&Lt/List≫
)
}

让树;

if(props.itemlist.length>0){
if(props.itemlist[0].子级!{未定义的){
树=构建列表(
props.itemlist[0].子项,
Props.Selected标签,
支持文件夹切换,
props.ontagtoggle)中;
}否则{
tree=<div>props.itemlist[0].name+':'+props.itemlist[0].标题</div>
}
}否则{
tree=<div><h2 classname=“small”>找不到模型。</h2></div>;
}

返回(<DIV>树</DIV>);
}

导出默认WithStyles(Styles,WithTheme:true)(Treerender);
< /代码> <:


我想得到这个结果:



如果我添加嵌套样式,它们对于所有嵌套列表都是相同的。我需要为下一个级别增加填充。

你能帮忙吗?(欢迎发表评论!)

代码:

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);