在React.js中动画新添加元素

我有一个反应组件，它使用ReactCSSTransitionGroup进行CSS转换，并且我的服务器已启动并运行了一个虚拟数据库和一个API调用，该调用返回一个对象数组，然后测试的目的，我使用的setTimeout来查询我的API网址：在React.js中动画新添加元素

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

var ItemsList = React.createClass({ 
    getInitialState: function() { 
     return { 
      items: [], 
      api: { 
       getItems: '/api/items' 
      } 
     } 
    }, 

    componentDidMount: function() { 
     this.fetchData(); 
    }, 

    fetchData: function() { 
     $.get(this.state.api.getItems, function(data) {    
      this.setState({ 
       items: data 
      }); 
      setTimeout(this.fetchData, 3000); 
     }.bind(this)); 
    }, 

    render: function() { 
     var items = this.state.items.map(function(item, index) { 
      return (
       <div className="title" key={index}>            
        {item.title}      
       </div> 
      ); 
     }.bind(this)); 
     return (
      <div className="content"> 
       <ReactCSSTransitionGroup transitionName="example"> 
        {items} 
       </ReactCSSTransitionGroup> 
      </div>  
     ); 
    } 
}); 

React.render(
    <ItemsList />, 
    document.querySelector('.react') 
);

而这里的CSS：

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 2.5s ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 2.5s ease-in; 
}

我想实现的是，每一次的项目被添加到阵列中，我想让它动起来，但有一个条件 - 新的物品必须出现在t该列表的操作。

所以我在PHP中做了orderBy created_at DESC，它成功返回了所有的对象（按我想要的顺序），但是React.js在最上面呈现新对象，然后为最后一个元素动画（即使它添加了一个新的一个在顶部）。

我在做什么错？ :(

来源

2015-07-20 Such Much Code

想通了

我不得不这样做

<div className="title" key={item.id}>            
    {item.title}      
</div>

代替：

<div className="title" key={index}>            
    {item.title}      
</div>

因为index来自一个数组，它改变每次添加的元素。

来源

2015-07-20 15:10:18

确保你的item.id是唯一的，但我确定它是;） –

在React.js中动画新添加元素

回答

相关问题