原文 http://forjs.org/book/xyfULqrrXg/section/g19V1ou1vx

程序员 2014-11-1 一天的奇妙之旅

推荐：《精通Node.js开发》 《Angular.js视频详解》

加作者QQ 1405491181 探讨coder如何踏上奇妙之旅！

前几天思考一些有趣的挑战，并且做了一定的调整，感觉自己成长了许多。还是继续我的奇妙之旅！

项目的需要，我要用reactjs开发一个tree components，开始想考虑用angular工具，前几天的思考后，我考虑到项目本身的特殊性， 决定采用reactjs来做mvc的V部分，这并不是说angular不好。世界上没有银弹，没有绝对好绝对坏的技术， 我发现爱上一个技术是很危险的，工具而已，在特定 context 要用特定的东西，钳子扳子各有用途。

选择技术是根据特定项目而言，所以应该不断学习任何新生的框架、技术和理念，学习不是为了用它，正所谓 艺多不压身，也许你在遇到某个挑战时，就会用上，所以不要迷信一种方式，而是要放开思路，接受更多的经验谈。 当你的眼睛看到不一样的理念时，你不要马上排斥，而是要接受它，收入囊中。

阴阳理论，所有坏的也有好的，好的当中一定也有坏的，重要的是要看用它的人，有个人问达摩：空即使色 色即是空 是不是就是说无好无坏无我无他全无无之空也。 然后达摩用拳头打了那个人，那个人马上说：为何打我！！ 达摩曰：既然一切都空 你为何知道痛呢？接着达摩阐述了禅学之根本，他说：看那看不到的，听那听不到的声音才是根本。 这句话的意思是：不断的学习新的事物，并且看到背后的本质。

论道也就这样了，下面还是开发吧：

开发Tree元件

先看看最终结果

首先要安装3个依赖库

jspm install tree-node=npm:tree-node  --save

jspm install react=npm:react --save

jspm install react-bootstrap=github:react-bootstrap/react-bootstrap-bower

安装好后就可以正式开发了，先创建渲染的UI结构：

    render() {

        var id = this.state.model.id;

        return (
            <li className={this.isOpen(id) ? "open-node" : "close-node"}>
                <h4 data-node-id={id} onClick={this.clickNode}>
                    <Glyphicon data-node-id={id} id={id} onClick={this.onoff} glyph={this.isOpen(id) ? "minus" : "plus"} />
                 <span data-node-id={id} id={id} onDoubleClick={this.onoff} onClick={this.select}>{this.state.model.data("label")}</span>
                </h4>
                {this.renderChild()}
            </li>
        )
    }

最终形成下面的html结构

ul
  li
    h4
    ul
  li
    h4
    ul

先这样，之后还要更改和优化。

渲染子节点！

    renderChild() {

        var childs = [], parent = this.state.model;
        parent.childIds.forEach((cid)=> {
            var child = parent.getNode(cid);
            childs.push(new TreeNode({
                model: child,
                selectHandle: this.select,
                command: this.props.command
            }));
        })

        return (
            <ul>
            {childs}
            </ul>
        )
    }

我们用一个页面测试一下

Promise.all([
    System.import("./build/TreeNode"),
    System.import("react"),
    System.import("tree-node")]).then(function (lib) {

    var Tree = lib[0];
    var React = lib[1];
    var TreeNode = lib[2];

    var tree = new TreeNode;

    var n1 = new TreeNode;
    var n2 = new TreeNode;
    var n3 = new TreeNode;
    var n4 = new TreeNode;

    n1.data("label", "leo");
    n2.data("label", "giese");
    n3.data("label", "nnn333")
    n4.data("label", "n4444")

    tree.appendChild(n1).appendChild(n2);

    n2.appendChild(n3);
    n2.appendChild(n4);

    var option = {model:tree.json,command:{}}

    React.render(new Tree(option), document.querySelector("#tree1"));
    React.render(new Tree(option), document.querySelector("#tree2"));
})

<div id="tree1" style="float:left"></div>
<div id="tree2" style="float:left"></div>

出现了下面的效果：

看起来不美观，并且收不回去，修改一下代码，并加入一个央视，看来起萌萌的就更好了！

.tree {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree ul {
    list-style: none;
    margin-left: 1em;
    padding: 0;
}

.tree li > h4 span:first-child:after {
    padding:5px;

}

.tree li.open-node > ul{
    display:block;
}

.tree li.close-node > ul{
    display:none;
}

最终效果是