我是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我真的很困惑我应该如何在这个多嵌套节点场景中实现它。
有人能指出我正确的方向吗?
感谢。 托马斯