【ReactJS】自制TreeView控件

var Tree = React.createClass({
    getDefaultProps: function() {
        return {
            nodes:[
            {id:1,pid:0,text:"頂級節點"},
            {id:2,pid:1,text:"一級節點1"},
            {id:4,pid:2,text:"1節點下的1"},
            {id:5,pid:2,text:"1節點下的2"},
            {id:6,pid:3,text:"2頂級節點1"},
            {id:3,pid:1,text:"一級節點2"},
            ]//空
        };
    },
    /**
     * 加載樹
     * @param pid 父節點id 
     */
    loadTree:function(pid,level){
        //預先保存
        var children = new Array();
        //別名 nodes
        var nodes = this.props.nodes;
        var index = -1;
        //console.log(nodes);
        //遞歸添加孩子
        for (var i = 0; i < nodes.length ; i++) {
            //尋找本節點的索引
            if(nodes[i].id==pid)
            {
                index=i;
            }
            //加載孩子
            if(nodes[i].pid==pid)
            {
                children.push(this.loadTree(nodes[i].id,level+1));
            }
        }

        var levelBlank="";
        for (level--; level>= 0; level--) {
            levelBlank+="-";
        }

        
        var thisContent = "";
        if(index>=0)
        {
            thisContent=nodes[index].text;
        }
        var _self=<div id={"parent"+pid}>
            {levelBlank}
            {thisContent}
            {children.length>0? children:""}
            </div>;
        
       
        return _self;

    },
    render: function() {
        return (
            <div id="reactTree">{this.loadTree(1,0)}</div>
        );
    }
});


ReactDOM.render(
    <Tree />,
    document.getElementById('example'));