react樹狀元件

最近在react專案中需要乙個樹狀元件，但是又不想因為這個去引入一套ui元件，故自己封裝了乙個基於react的樹狀元件，

個人認為比較難得部分在於資料的處理，話不多說直接上**：

下面是tree.js

import react,  from 'react';

import './tree.css';
import stack from '../utils/util';
class tree extends component ,
treearray: ,
treeobj: {},
type: 'tree',
parentid: 'pid',
id: 'id',
value: 'value',
label: 'label',
children: 'children',
checkbox: 
false
}    
this.checkmap =
}  componentwillmount() )
} else
)    }
}  componentdidmount()  
else
}  componentdidupdate() 
componentwillunmount() 
factoryarraydata() , rootid = null
;    data.map((v, i) => 
else
} else}} 
else
if (obj[v[this
.state.id]]) 
obj[v[
this.state.id]] =v
})this
.setstate()
}  factorytreedata() ;
stack.push(data);
while
(stack.top) 
obj[node[
this.state.id]] =node
}this
.setstate()
}  opennode (e, data)  
else
data.open = !data.open
this
.forceupdate()
}  selectnode (e, data)  
else
this
.setstate(, () =>
})}  selectcheckbox (e, data)  
else
let check =data.checked
if (data.children &&data.children.length) 
if (check === 2)  
else}} 
else
else
}if (data[this.state.parentid] || data[this.state.parentid] === 0)  
else
}}  updateparentnode (data)  
else
if (par.children[i].checked === 1) 
}if (checklen ===par.children.length)  
else
if (partchecked || (checklen < par.children.length && checklen > 0))  
else
if (this.state.treeobj[par[this.state.parentid]] || this.state.treeobj[par[this.state.parentid]] == 0)  
else
}}  getcheckeditems() 
if (node.checked === 2) 
}this
.props.selectchange(checkedarr)
}  rendertreeparent()  classname="opennode">
`} onclick=>
:            
}        
this.state.selectval === data[this.state.value]?'active':''}`} onclick=>
: null
}      
)  }
rendertreenode(data)  classname="opennode">
`} onclick=>
:              
}          
this.state.selectval === val[this.state.value]?'active':''}`} onclick=>
: null
}        
)    })
}  render() 
)  }
}export 
default tree

.tree .tree .childnode .tree .childnode .checkbox .tree .childnode .checkbox:hover .tree .childnode .checkbox.checked .tree .childnode .checkbox.partchecked .tree .childnode .nodename .tree .childnode .nodename.active .tree .childnode .nodename:hover .tree .childnode.open .opennode .tree .childnode.open .childlist .tree .childnode.close .opennode .tree .childnode.close .childlist .tree .childnode .filebox .tree .childnode .filebox:hover .tree .childnode .filebox img .tree .childnode:before .tree .childnode:after .tree .childnode.parentnode:before .tree .childnode .opennode .tree .childnode .opennode:hover .tree .childnode.nochildren .opennode .tree .childnode.nochildren .opennode:hover .tree .childnode .lastnode

github專案位址

react父子元件傳值 react元件通訊

react元件之間的通訊，其實就是通過乙個props建立彼此之間的橋梁，而我們最常用的就是父子傳值，子父傳值，以及兄弟之間傳值 1 父元件給子元件傳值 父元件給子元件傳值相對比較簡單，如果想讓他們倆之間有所聯絡，想傳遞父元件的資料，那麼我們就在父級元件中的子元件標籤上定義乙個屬性，而屬性的值就是我們...

React高階元件

想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...

React基礎 元件

元件從概念上看就像是函式，它可以接收任意的輸入值 稱之為 props 並返回乙個需要在頁面上展示的react元素。class welcome extends react.component class welcome extends react.component const element sar...