我一直在寻找一个关于如何在React中向列表添加项目并对新添加的项目进行动画处理的例子,但是不是将其添加到列表末尾,而是添加到列表开头。我发现了这个例子,但是无论我在本地还是在线上尝试,我似乎都不能使项目在数组的第一个位置时执行动画。以下是一个简单的React待办事项添加项目的示例。我该如何将项目添加到第一个位置,并对第一个位置进行动画处理?
JS Fiddle:http://jsfiddle.net/kb3gN/13152/
JS Fiddle:http://jsfiddle.net/kb3gN/13152/
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1)
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<TodoItem item={item} key={item} onClick={this.handleRemove.bind(this, i)}/>
);
}.bind(this));
return (
<div>
<div><button onClick={this.handleAdd}>Add new</button></div>
<ReactCSSTransitionGroup transitionName="example">
{items}
</ReactCSSTransitionGroup>
</div>
);
}
});
React.render(<TodoList/>, document.getElementById('list'));
['1', '2', '3']
并且你使用unshift('0')
,它会在开头添加0
,但是3
始终是具有过渡效果的那个。 - Johhan Santana