animation - ReactJs:嵌套元素中的转换

Question

我是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 中，以便在隐藏和显示时进行转换。我在这里阅读了所有相关内容 - https://facebook.github.io/react/docs/animation.html我真的很困惑在这个多嵌套节点场景中应该如何实现它。

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

谢谢。托马斯

Answer 1

因此，经过一段痛苦但快乐的时光后，我找到了解决方案。此处更新 - https://jsfiddle.net/69z2wepo/7856/

为什么会痛？好吧，我花了很长时间才发现 ReactCSSTransitionGroup 需要始终位于 DOM 中，即使我没有添加嵌套。

此外，我需要以与嵌套相同的方式嵌套 ReactCSSTransitionGroup，ReactCSSTransitionGroup 创建特殊元素，子级将被动画化。

ReactCSSTransitionGroup 只关心顶级子级的动画。因此，如果您仅更改状态(删除/添加)嵌套 div，但保留其父级(ReactCSSTransitionGroup 的子级)，则不会产生动画。

代码:

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