Animation ReactJs：嵌套元素中的转换

我是ReactJs的新手，开发了多嵌套文件夹浏览-我的意思是这里-

var reactcstransitiongroup=React.addons.cstransitiongroup；
var List=React.createClass({
getInitialState:函数（）{
返回{data:this.props.data}；
},
onClickHandler:函数（nodeName，i，e）{
e、 停止传播（）；
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=函数（节点）{
var listElements=nodes.map（函数（节点）{
返回此.state.data[node].map（函数（nodeData，i）{
var subList=null；
if（nodeData.isExpanded）{
subList=getList（nodeData.nodes）；
}
return（

{nodeData.label}{subList}
）；
}.约束（这个）；
}.约束（这个）；
返回
{liselements}
；
}.约束（本）；
返回getList（['root']，0）；
}
});
风险值数据={
根目录：[{
标签：'1'，
节点：['a'，'b']
},{
标签：'2'，
节点：['d'，'e']
}],
a:[{
标签：'label a'，
节点：['c']
}],
b:[{
标签：‘标签b’，
节点：[]
}],
c:[{
标签：“标签c”，
节点：[]
}],
d:[{
标签：“标签d”，
节点：[]
}],
e:[{
标签：“标签e”，
节点：[]
}]
}
React.render（，document.getElementById（'container'）；

所有这些都可以很好地工作，隐藏和显示嵌套节点。现在，我想将所有内容包装在CSSTransitionGroup中，以便在隐藏和显示上进行转换。我在这里读了所有关于它的内容——我真的很困惑在这个多嵌套节点场景中应该如何实现它

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

谢谢。

---

托马斯

因此，在经历了x个小时的痛苦和快乐之后，我找到了解决办法。 在此更新-

为什么会痛？我花了很长时间才弄明白，即使我没有添加嵌套，ReactCSTransitiionGroup也需要始终位于DOM中

此外，我还需要嵌套ReactCSStransitongGroup，嵌套方式与嵌套方式相同，ReactCSStransitongGroup创建特殊元素，子元素将被设置动画

而ReactCStransitingGroup只关心如何为顶级儿童制作动画。因此，如果您仅更改嵌套div的状态（删除/添加），而将其父级保留为reactcstransitiongroup的子级，则不会设置动画

代码：

var reactcstransitiongroup=React.addons.cstransitiongroup；
var List=React.createClass({
getInitialState:函数（）{
返回{data:this.props.data}；
},
onClickHandler:函数（nodeName，i，e）{
e、 停止传播（）；
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=函数（节点）{
var listElements=nodes.map（函数（节点）{
返回此.state.data[node].map（函数（nodeData，i）{
var子列表=“”；
if（nodeData.isExpanded）{
subList=getList（nodeData.nodes）；
}
return（

{nodeData.label}
{子列表}
）；
}.约束（这个）；
}.约束（这个）；
return
{listElements}
；
}.约束（本）；
返回getList（['root']，0）；
}
});
风险值数据={
根目录：[{
标签：'1'，
节点：['a'，'b']
},{
标签：'2'，
节点：['d'，'e']
}],
a:[{
标签：'label a'，
节点：['c']
}],
b:[{
标签：‘标签b’，
节点：[]
}],
c:[{
标签：“标签c”，
节点：[]
}],
d:[{
标签：“标签d”，
节点：[]
}],
e:[{
标签：“标签e”，
节点：[]
}]
}
React.render（，document.getElementById（'container'）；

谢谢，因此，如果我知道我可以将react transition group放在应用程序中要设置动画的组件上的任意位置，那么它将自动创建顶级子对象来设置动画？

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'));

    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 = '';
                    if(nodeData.isExpanded) {
                        subList = getList(nodeData.nodes);
                    }
                    return (<li  onClick={this.onClickHandler.bind(this, node, i)}>
                            {nodeData.label}
                            <ReactCSSTransitionGroup transitionName="example">
                                {subList}
                            </ReactCSSTransitionGroup>
                        </li>);
                }.bind(this));
            }.bind(this));

            return <ul key={nodes.join('_')}>{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'));