react CSSTransitionGroup的一个问题，求助

Question

如图，明明添加的元素是 “测试10” ，过渡却出现在了 “娱乐” 元素上，这是怎么回事，代码在下面，

.fade-appear{

  opacity: 0.01;

}

.fade-appear.fade-appear-active {

  opacity: 1;

  transition: opacity 500ms ease-in;

}

.fade-enter {

  opacity: 0.01;

}

.fade-enter.fade-enter-active {

  opacity: 1;

  transition: opacity 500ms ease-in;

}

.fade-leave {

  opacity: 1;

}

.fade-leave.fade-leave-active {

  opacity: 0.01;

  transition: opacity 300ms ease-in;

}

import React from 'react'

import {connect} from 'react-redux'

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

import style from './style.scss'

import {removeCate} from '../actions.js'

import Item from './item.js'

const List = ({cate, children, onRemoveCate}) => {

    return (

        <ul className={style.cate}>

            <CSSTransitionGroup

                transitionName={{

                    enter: `${style['fade-enter']}`,

                    enterActive: `${style['fade-enter-active']}`,

                    leave: `${style['fade-leave']}`,

                    leaveActive: `${style['fade-leave-active']}`,

                    appear: `${style['fade-leave']}`,

                    appearActive: `${style['fade-leave-active']}`

                }}

                transitionAppear={true}

                transitionAppearTimeout={500}

                transitionEnterTimeout={500}

                transitionLeaveTimeout={300}

            >

                {

                    cate.map((item, index) => (

                        <Item 

                            key={index} 

                            title={item.title}

                            onRemove={() => onRemoveCate(item.id)}

                        />

                    ))

                }

            </CSSTransitionGroup>

            {children}

        </ul>

    )

}

Answer 1

你添加的时候怎么添加的，你用了数组的index来做了元素的key，可能导致你添加的10的index和原来的娱乐的index一样，key换成其他方式试试