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，我非常困惑，应该如何在这个多嵌套节点场景中实现这一点。

有人可以指向正确的方向吗？

谢谢。 Tomas

Answer 1

因此，经过x的痛苦，但快乐的小时我找到了解决方案。 这里更新 - 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'));