功能介紹：
1. 實現遞歸搜索遞歸類型的對象數據，
2. 列表能遞歸展示數據
3. 切換目錄時符合目錄樹結構的數據展示
功能展示：
index.js
import React, {Component} from 'react';
import data from './data';
class Documentation extends Component {
flag = false;
state = {
value: '',
searchLists: []
};
/**
* 遞歸函數找到包含的項目
* data 要遞歸的數組
* value 尋找的內容
* dataArr 返回由數組包含的項
*/
valueRecursion = (data, value,dataArr) => {
data.forEach(res => {
let content = '';
content = res.label;
res.actions.items.forEach(item => {
content += item.content;
});
if (content.includes(value)) {
dataArr.push(res);
}else if(res.items && res.items.length > 0) {
this.valueRecursion(res.items, value, dataArr)
}
});
return dataArr;
}
/**
* 拿到輸入框的值，然后去遞歸，找到包含搜索內容項
*/
searchValue= (e) => {
let lists = this.valueRecursion(data.items, e.target.value,[]);
this.setState({
value: e.target.value,
searchLists: lists
});
}
/**
* 設置子dom顯示，並且刷新數據
*/
openChild = (res,numIndex)=> {
console.log(this.refs[res.id].childNodes);
let activeEle = this.refs[res.id];
let activeEleARR = activeEle.childNodes;
activeEleARR.forEach(res => {
if(res.nodeName === 'DIV') {
if(res.style.display === 'none') {
res.style.display = 'block';
} else {
res.style.display = 'none';
}
}
})
if(numIndex === 1) {
let allBrother = activeEle.parentNode.childNodes;
allBrother.forEach(res => {
if(res.nodeName === 'DIV' && res !== activeEle) {
res.childNodes.forEach(res => {
if (res.nodeName === 'DIV') {
res.style.display = 'none';
}
})
}
})
}
// 下面處理每個節點數據展示
}
/**
* render包含項中所有的列表
*/
searchList = (data,numIndex)=> {
numIndex = numIndex +1;
const list = [...data];
let lists = [];
lists = list.map((res) => {
return (
<div key={res.id} ref={res.id}
style={{marginLeft: `${(numIndex-1)*20}px`,display: numIndex === 1? 'block':'none'}}>
<span onClick={this.openChild.bind(this,res,numIndex)}>{res.label}</span>
{(res.items && res.items.length > 0)?this.searchList(res.items,numIndex):''}
</div>
)
})
return lists;
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.searchValue} />
{this.state.searchLists.length > 0? this.searchList(this.state.searchLists,0):''}
</div>
);
}
}
export default Documentation;
data.js
const data = {
id: '00',
label: '00000000',
items: [
{
id: '0',
label: '0',
actions: {
items: [
{
content: '0'
},
{
content: '0'
}
]
},
items: [
{
id: '00',
label: '00',
actions: {
items: [
{
content: '00'
}
]
},
items: [
{
id: '000',
label: '000',
actions: {
items: [
{
content: '000'
}
]
},
items: [
{
id: '0000',
label: '0000',
actions: {
items: [
{
content: '0000'
}
]
}
},
{
id: '0001',
label: '0001',
actions: {
items: [
{
content: '0001'
}
]
}
}
]
},
{
id: '001',
label: '001',
actions: {
items: [
{
content: '001'
}
]
}
},
{
id: '002',
label: '002',
actions: {
items: [
{
content: '002'
}
]
}
}
]
},
{
id: '01',
label: '01',
actions: {
items: [
{
content: '01'
}
]
},
items: [
{
id: '001',
label: '001',
actions: {
items: [
{
content: '001'
}
]
}
}
]
}
]
},
{
id: '1',
label: '1',
actions: {
items: [
{
content: '1'
},
{
content: '1'
}
]
},
items: [
{
id: '10',
label: '10',
actions: {
items: [
{
content: '10'
},
{
content: '10'
}
]
}
},
{
id: '11',
label: '11',
actions: {
items: [
{
content: '11'
},
{
content: '11'
}
]
},
items: [
{
id: '110',
label: '110',
actions: {
items: [
{
content: '110'
},
{
content: '110'
}
]
}
},
{
id: '111',
label: '111',
actions: {
items: [
{
content: '111'
},
{
content: '111'
}
]
}
}
]
}
]
},
{
id: '2',
label: '2',
actions: {
items: [
{
content: '2'
},
{
content: '2'
}
]
},
items: []
}
]
};
export default data;