前端同学每次看到树形数据，无论是表格还是各种奇葩的Tree第一反应都是
产品此时就像一个讨债的地主见面就是我要这个
来来满足他
renderTree = jsonTree => jsonTree.map( value => {//遍历树状数组，如果发现他有children则先套上<TreeNode>,再对他children中的元素做相同的操纵，直到children为空的元素停止，说明他们已经是最深的那一层了。if(value.children){return(<TreeNode title={<div className="main-title-les" key={value.id}>{/*<span><img src={xxx/value.img}/></span>*/}<span className="main-span-cel">{value.type?value.type:''}</span><span className="main-span-sel">{value.sce?value.sce:''}</span><span className="main-span-gel">{value.title}</span></div>} key={value.id} icon={(props)=>{console.log(props)}}>{this.renderTree(value.children)}</TreeNode>)}else {return (<TreeNode title={<span>{value.title}</span>}></TreeNode>)}})
方法其实很简单：利用render函数就行了 tree组件接收一个预编译的TreeNode节点作为自定义区域。然后你要做的事情就很简单了
什么产品还要加面包屑 （ps:你咋不上天呢）
冷静分析一下 这个东西
突然欣喜，这不就是个面包屑嘛！ 哈哈哈哈哈！ 孩子找爹的游戏而已
反正递归！
/*** 深度优先遍历树* 一个递归方法* @params props :查询指标对应参数* @params data:原始数据id* @params id:当前id，初始为null(id)**/getFathersId=(id, data, props = 'key')=> {var arr = []const rev = (data, IDS) => {for (var i = 0, length = data.length; i < length; i++) {const node = data[i]if (node[props ] === IDS) {arr.unshift(node[props ])return true} else {if (node.children && node.children.length) {if (rev(node.children, IDS)) {arr.unshift(node[props ])return true}}}}return false}rev(data, id)return arr}
好处就是你可以根据这个id返回你要的任何东西 。面包屑！中文走起
getFathersByName=(id, data, prop = 'key')=> {var arr = []const rev = (data, IDS) => {for (var i = 0, length = data.length; i < length; i++) {const node = data[i]if (node[prop] === IDS) {arr.unshift(node.title)return true} else {if (node.children && node.children.length) {if (rev(node.children, IDS)) {arr.unshift(node.title)return true}}}}return false}rev(data, id)return arr}
级联信息反填
搞定它！！！
注意级联的返回识别的是id或者指定的prop"key"
