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