Javascript 第一次加载时显示层次结构树的折叠方式
我正在尝试创建一个树组件。我正在使用模拟数据并使用react创建此组件 我想当是第一次装的时候，展示一下所有孩子的第一个父母。要显示折叠还是不显示，我添加了一个名为collapsed的类，该类具有如下Javascript 第一次加载时显示层次结构树的折叠方式,javascript,reactjs,Javascript,Reactjs,我正在尝试创建一个树组件。我正在使用模拟数据并使用react创建此组件 我想当是第一次装的时候，展示一下所有孩子的第一个父母。要显示折叠还是不显示，我添加了一个名为collapsed的类，该类具有如下display:none： <div className={`hierarchy ${level} ${isCollapsed() ? "collapsed" : ""}`}> 首次加载时调用此函数： export const showCollapsed = (branch: IHie
display:none<div className={`hierarchy ${level} ${isCollapsed() ? "collapsed" : ""}`}>
export const showCollapsed = (branch: IHierarchyBranch) => {
// Get parent Ids
const parentIds: Array<string> = getFirstChildrenIds(branch);
// Get all ids
const ids: Array<string> = getIdOfChildrens(branch);
// remove parent ids from all ids to load first branch with their first children
const idsWithoutParents: Array<string> = removeAllIdsContainedInOtherArray(
ids,
parentIds
);
return idsWithoutParents;
};
const onUpdatedHiddenBranchs = (ids: Array<string>, show: boolean) => {
let items: Array<string> = [];
if (!show) {
items = [...hiddenBranchs, ...ids];
} else {
const copyItems: Array<string> = [...hiddenBranchs];
const duplicatedItems: Array<string> = findDuplicatedItems(
copyItems
);
items = copyItems.filter((item: string) => {
return !ids.includes(item);
});
items = [...items, ...duplicatedItems];
}
onUpdateHiddenBranchs(items);
};
import React, { useState } from "react";
import { IHierarchyBranchProps, IHierarchyBranch } from "../main/interfaces";
import { getIdOfChildrens } from "../../utils/hierarhcy";
const HierarchyBranch = ({
id,
level,
label,
favourite,
icon,
children,
branch,
selectedId,
hiddenBranchs,
onUpdateSelectedBranch,
onUpdatedHiddenBranchs,
onUpdateFavourites,
renderHierarchyBranch,
}: IHierarchyBranchProps): JSX.Element => {
const [opened, setOpen] = useState<boolean>(true);
const onSelectDma = () => {
onUpdateSelectedBranch(id, branch);
};
const onOpenCloseTags = () => {
const show: boolean = !opened;
setOpen(show);
const ids: Array<string> = getIdOfChildrens(branch);
onUpdatedHiddenBranchs(ids, show);
};
const onUpdateFavorite = () => {
onUpdateFavourites(branch);
};
const isCollapsed = () => {
const index: number = hiddenBranchs.findIndex( (hiddenId: string) => hiddenId === branch.value);
return (index >=0) ? true : false;
};
return (
<>
<div
className={`go-hierarchy ${level} ${
isCollapsed() ? "collapsed" : ""
}`}
style={{ marginLeft: `${level * 15}px` }}
>
{branch.children && branch.children.length > 0 ? (
<div className="hirarchy-show" onClick={onOpenCloseTags}>
{opened ? (
<i className="icon-down-open" />
) : (
<i className="icon-right-open" />
)}
</div>
) : <div className="hierarchy-hidden"></div>}
<div
className={`go-hierarchy-branch ${
selectedId === id ? "active" : ""
} `}
onClick={onSelectDma}
>
{!icon ? (
<div className="hierarchy-branch-favourite">
{opened ? (
<i className="icon-folder-open-empty" />
) : (
<i className="icon-folder-empty" />
)}
</div>
) : (
<>
{icon === "tag" ? (
<div className="hierarchy-branch-favourite">
<i className="icon-tag" />
</div>
) : (
<div
className="hierarchy-branch-favourite"
onClick={onUpdateFavorite}
>
{!favourite ? (
<i className="icon-bookmark-empty" />
) : (
<i className="icon-bookmark" />
)}
</div>
)}
</>
)}
<div className="hierarchy-branch-title">
<label>{label}</label>
</div>
</div>
</div>
{children &&
children.length > 0 &&
children.map((child: IHierarchyBranch, index: number) => {
return renderHierarchyBranch(index, child);
})}
</>
);
};
export default HierarchyBranch;
import React，{useState}来自“React”；
从“./main/interfaces”导入{IHierarchyBranchProps，IHierarchyBranch}；
从“./../utils/hierarhcy”导入{getIdOfChildrens}”；
常量层次分支=({
身份证件
水平，
标签，
最喜欢的
偶像
儿童
分支机构，
selectedId，
希登布兰奇，
ONUPDATESELECTED分支，
更新的Hiddenbranchs，
更新最喜欢的，
renderHierarchyBranch，
}：IHierarchyBranchProps）：JSX.Element=>{
const[opened，setOpen]=useState（true）；
const onSelectDma=（）=>{
OnUpdate SelectedBranch（id，branch）；
};
const onOpenCloseTags=（）=>{
常量显示：布尔=！已打开；
setOpen（显示）；
常量ID:Array=getIdOfChildrens（分支）；
onUpdatedHiddenBranchs（ID，显示）；
};
const onUpdateFavorite=（）=>{
ONUpdateFavorites（分支机构）；
};
const isCollapsed=（）=>{
常量索引：number=hiddenBranchs.findIndex（（hiddenId:string）=>hiddenId==branch.value）；
返回（索引>=0）？真：假；
};
返回(
{branch.children&&branch.children.length>0(
{打开了吗(
) : (
)}
) : }
{！图标(
{打开了吗(
) : (
)}
) : (
{图标===“标记”(
) : (
{！最喜欢的(
) : (
)}
)}
)}
{label}
{儿童&&
子项长度>0&&
children.map（（child:IHierarchyBranch，index:number）=>{
返回renderHierarchyBranch（索引，子级）；
})}
);
};
导出默认的层次结构分支；
请阅读下面的内容，它将帮助您理解清楚。通过这种方式，可以获得折叠视图
class App extends React.Component {
state = { data: tree };
render() {
return (
<div>
<div className='example-config'>
<button onClick={this.expandAll} className='k-button'>Expand all</button>
<button onClick={this.collapseAll} className='k-button'>Collapse all</button>
</div>
<TreeView data={this.state.data} expandIcons={true} onExpandChange={this.onExpandChange} />
</div>
);
}
expandAll = () => {
this.setState({
data: this.state.data.map(item => Object.assign({}, item, { expanded: true }))
});
}
collapseAll = () => {
this.setState({
data: this.state.data.map(item => Object.assign({}, item, { expanded: false }))
});
}
onExpandChange = (event) => {
const data = this.state.data.slice();
const itemIndex = data.indexOf(event.item);
data[itemIndex] = { ...event.item };
data[itemIndex].expanded = !data[itemIndex].expanded;
this.setState({ data });
}
}
const tree = [
{ text: 'Item1', items: [{ text: 'Item1.1' }, { text: 'Item1.2' }] },
{ text: 'Item2', items: [{ text: 'Item2.1' }, { text: 'Item2.2' }] },
{ text: 'Item3', items: [{ text: 'Item3.1' }, { text: 'Item3.2' }] },
{ text: 'Item4', items: [{ text: 'Item4.1' }, { text: 'Item4.2' }] },
{ text: 'Item5', items: [{ text: 'Item5.1' }, { text: 'Item5.2' }] },
{ text: 'Item6', items: [{ text: 'Item6.1' }, { text: 'Item6.2' }] }
];
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
类应用程序扩展了React.Component{
状态={data:tree}；
render（）{
返回(
全部展开
全部崩溃
);
}
expandAll=（）=>{
这是我的国家({
data:this.state.data.map（item=>Object.assign（{}，item，{expanded:true}））
});
}
collapseAll=（）=>{
这是我的国家({
数据：this.state.data.map（item=>Object.assign（{}，item，{expanded:false}））
});
}
onExpandChange=（事件）=>{
const data=this.state.data.slice（）；
const itemIndex=data.indexOf（event.item）；
数据[itemIndex]={…event.item}；
数据[itemIndex]。已扩展=！数据[itemIndex]。已扩展；
this.setState（{data}）；
}
}
常数树=[
{text:'Item1'，items:[{text:'Item1.1'}，{text:'Item1.2'}]}，
{text:'Item2'，items:[{text:'Item2.1'}，{text:'Item2.2'}]}，
{text:'Item3'，items:[{text:'Item3.1'}，{text:'Item3.2'}]}，
{text:'Item4'，items:[{text:'Item4.1'}，{text:'Item4.2'}]}，
{text:'Item5'，items:[{text:'Item5.1'}，{text:'Item5.2'}]}，
{text:'Item6'，items:[{text:'Item6.1'}，{text:'Item6.2'}]}
];
ReactDOM.render(
,
document.querySelector（'my-app'）
);
import React, { useState } from "react";
import { IHierarchyBranchProps, IHierarchyBranch } from "../main/interfaces";
import { getIdOfChildrens } from "../../utils/hierarhcy";
const HierarchyBranch = ({
id,
level,
label,
favourite,
icon,
children,
branch,
selectedId,
hiddenBranchs,
onUpdateSelectedBranch,
onUpdatedHiddenBranchs,
onUpdateFavourites,
renderHierarchyBranch,
}: IHierarchyBranchProps): JSX.Element => {
const [opened, setOpen] = useState<boolean>(true);
const onSelectDma = () => {
onUpdateSelectedBranch(id, branch);
};
const onOpenCloseTags = () => {
const show: boolean = !opened;
setOpen(show);
const ids: Array<string> = getIdOfChildrens(branch);
onUpdatedHiddenBranchs(ids, show);
};
const onUpdateFavorite = () => {
onUpdateFavourites(branch);
};
const isCollapsed = () => {
const index: number = hiddenBranchs.findIndex( (hiddenId: string) => hiddenId === branch.value);
return (index >=0) ? true : false;
};
return (
<>
<div
className={`go-hierarchy ${level} ${
isCollapsed() ? "collapsed" : ""
}`}
style={{ marginLeft: `${level * 15}px` }}
>
{branch.children && branch.children.length > 0 ? (
<div className="hirarchy-show" onClick={onOpenCloseTags}>
{opened ? (
<i className="icon-down-open" />
) : (
<i className="icon-right-open" />
)}
</div>
) : <div className="hierarchy-hidden"></div>}
<div
className={`go-hierarchy-branch ${
selectedId === id ? "active" : ""
} `}
onClick={onSelectDma}
>
{!icon ? (
<div className="hierarchy-branch-favourite">
{opened ? (
<i className="icon-folder-open-empty" />
) : (
<i className="icon-folder-empty" />
)}
</div>
) : (
<>
{icon === "tag" ? (
<div className="hierarchy-branch-favourite">
<i className="icon-tag" />
</div>
) : (
<div
className="hierarchy-branch-favourite"
onClick={onUpdateFavorite}
>
{!favourite ? (
<i className="icon-bookmark-empty" />
) : (
<i className="icon-bookmark" />
)}
</div>
)}
</>
)}
<div className="hierarchy-branch-title">
<label>{label}</label>
</div>
</div>
</div>
{children &&
children.length > 0 &&
children.map((child: IHierarchyBranch, index: number) => {
return renderHierarchyBranch(index, child);
})}
</>
);
};
export default HierarchyBranch;
class App extends React.Component {
state = { data: tree };
render() {
return (
<div>
<div className='example-config'>
<button onClick={this.expandAll} className='k-button'>Expand all</button>
<button onClick={this.collapseAll} className='k-button'>Collapse all</button>
</div>
<TreeView data={this.state.data} expandIcons={true} onExpandChange={this.onExpandChange} />
</div>
);
}
expandAll = () => {
this.setState({
data: this.state.data.map(item => Object.assign({}, item, { expanded: true }))
});
}
collapseAll = () => {
this.setState({
data: this.state.data.map(item => Object.assign({}, item, { expanded: false }))
});
}
onExpandChange = (event) => {
const data = this.state.data.slice();
const itemIndex = data.indexOf(event.item);
data[itemIndex] = { ...event.item };
data[itemIndex].expanded = !data[itemIndex].expanded;
this.setState({ data });
}
}
const tree = [
{ text: 'Item1', items: [{ text: 'Item1.1' }, { text: 'Item1.2' }] },
{ text: 'Item2', items: [{ text: 'Item2.1' }, { text: 'Item2.2' }] },
{ text: 'Item3', items: [{ text: 'Item3.1' }, { text: 'Item3.2' }] },
{ text: 'Item4', items: [{ text: 'Item4.1' }, { text: 'Item4.2' }] },
{ text: 'Item5', items: [{ text: 'Item5.1' }, { text: 'Item5.2' }] },
{ text: 'Item6', items: [{ text: 'Item6.1' }, { text: 'Item6.2' }] }
];
ReactDOM.render(
<App />,
document.querySelector('my-app')
);