ReactJs:嵌套元素

时间:2015-05-07 16:16:41

标签: animation nested reactjs transitions

我是ReactJs的新手,开发了多个嵌套文件夹浏览 - 我的意思是在这里 - https://jsfiddle.net/69z2wepo/7804/

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
      var List = React.createClass({
         getInitialState: function() {
            return {data:this.props.data};
        },
        onClickHandler: function (nodeName, i, e) {
            e.stopPropagation();
            var newState = this.state.data[nodeName][i].isExpanded?false:true;
            this.state.data[nodeName][i].isExpanded = newState;
            this.setState(this.state);
        },
        render: function() {

            var getList = function(nodes) {

                var listElements = nodes.map(function(node) {
                    return this.state.data[node].map(function (nodeData,i) {
                        var subList = null;
                        if(nodeData.isExpanded) {
                            subList = getList(nodeData.nodes);
                        }
                        return (<li  onClick={this.onClickHandler.bind(this, node, i)}>
                                {nodeData.label}{subList}
                            </li>);
                    }.bind(this));
                }.bind(this));

                return <ul>{listElements}</ul>;

            }.bind(this);


            return  getList(['root'], 0);
        }
    });



    var data = {
        root:[{
            label:'1',
            nodes: ['a','b']
        },{
            label:'2',
            nodes: ['d','e']
        }],
        a:[{
            label:'label a',
            nodes: ['c']
        }],
        b:[{
            label: 'label b',
            nodes:[]
        }],
        c:[{
            label: 'label c',
            nodes: []
        }],
        d:[{
            label: 'label d',
            nodes: []
        }],
        e:[{
            label: 'label e',
            nodes: []
        }]
    }
    React.render(<List data={data} />, document.getElementById('container'));

一切正常,隐藏并显示嵌套节点。现在我想在CSSTransitionGroup中包装所有内容以在hide和show上进行转换。我在这里阅读所有相关内容 - https://facebook.github.io/react/docs/animation.html我真的很困惑我应该如何在这个多嵌套节点场景中实现它。

有人能指出我正确的方向吗?

感谢。 托马斯

0 个答案:

没有答案