导语

该库的前两个基本组件可以查看以上链接?，今天搬到了新的房子里，还是很满意的，明天就要去新公司报道了，希望能和新同事好好相处，完成2019年的几个目标。

TransitionGroup

<TransitionGroup>组件管理列表中的一组<Transition>组件。与<Transition>类似，<TransitionGroup>是一种状态机，用于管理组件随时间的安装和卸载。

下面的例子使用了之前的渐变CSS过渡。当项目被删除或添加到TodoList时，in属性会被自动切换。可以在<TransitionGroup>中使用任何<Transition>组件，而不仅仅是css。

第一步： 导入需要的文件

import React,{ Component } from 'react'import { CSSTransition, TransitionGroup } from 'react-transition-group'import './css/index.css'

第二步：编写初始state里的列表项

state = {    items: [      { id: 1, text: 'Buy eggs' },      { id: 2, text: 'Pay bills' },      { id: 3, text: 'Invite friends over' },      { id: 4, text: 'Fix the TV' },    ]  }

第三步：编写列表项

    
       {items.map(({ id, text }) => (    
           
      
        
        {            this.setState(state => ({              items: state.items.filter(                item => item.id !== id              ),            }));          }}>          ×                
       {text}      
      
    
       ))}
    

记住，要把所有需要管理的列表项都写在<TransitionGroup> 中，其次，<CSSTranstion> 组件的in属性此时由<TransitionGroup> 管理了，不需要单独设置了，当点击删除按钮时，list中的对应项将会被删除，对应项的in 属性将会被自动改为false，从而触发离场动画。

第四步：添加按钮

 {    const text = prompt('Enter some text');    if (text) {      this.setState(state => ({        items: [          ...state.items,          { id: 1123, text },        ],      }));    }  }}>  Add Item

当点击添加按钮，输入文字后，将会把此项添加到列表中，此时in属性为true，同时默认设置了首次动画，所以会触发一次进场动画。

效果图

完整代码

//index.jsimport React,{ Component } from 'react'import { CSSTransition, TransitionGroup } from 'react-transition-group'import './css/index.css'export default class App extends Component {  state = {    items: [      { id: 1, text: 'Buy eggs' },      { id: 2, text: 'Pay bills' },      { id: 3, text: 'Invite friends over' },      { id: 4, text: 'Fix the TV' },    ]  }  render () {    const { items } = this.state    return (      
    
        
     
                {items.map(({ id, text }) => (            
                    
       
                
         {                    this.setState(state => ({                      items: state.items.filter(                        item => item.id !== id                      ),                    }));                  }}>                  ×                                
        {text}              
       
            
                ))}        
             
      {            const text = prompt('Enter some text');            if (text) {              this.setState(state => ({                items: [                  ...state.items,                  { id: 1123, text },                ],              }));            }          }}>          Add Item              
    
    )  }}//index.css.show-enter {    opacity: 0.01;  }.show-enter-active {    opacity: 1;    transition: all 300ms ease-out;}.show-exit {    opacity: 1;}.show-exit-active {    opacity: 0.01;    transition: all 300ms ease-out;}.container {    position: absolute;    top: 20px;    left: 100px;    padding: 20px;    border-radius: 5px;    box-shadow: 0 0 10px 1px rgb(202, 202, 202);}.todo-list {    border-radius: 5px;    box-shadow: 0 0 5px 1px rgb(202, 202, 202);}.todo-list-item {    height: 35px;    line-height: 35px;    padding: 0 10px;    border-bottom: 1px solid rgb(202, 202, 202);}.todo-list-item:last-of-type {    border-bottom: 0;}.item-text {    margin-left: 10px;}.cancle {    border: 0;    color: #fff;    background-color: #F04134;    border-radius: 3px;    box-shadow: 0 0 5px 1px rgb(202, 202, 202);}.add {    border: 0;    height: 30px;    line-height: 30x;    width: 120px;    margin-top: 15px;    font-size: 14px;    border-radius: 3px;    box-shadow: 0 0 5px 1px rgb(202, 202, 202);}

Porps

<TransitionGroup> 的常用属性主要就2个，其它的有兴趣可以去官网看看 ?

component

default 'div' 也就是TransitionGroup渲染出来的标签为div，也可以就行更改，例如component="span" 渲染出来的就是span标签了

type: any

children

相当于你给的组件，可以是字符串或者自定义组件等。

type: any