Question

我有一个非常基本的列表组件，该组件根据redux状态呈现项目组件的列表。当列表组件从列表中删除项目时，该项目组件不会进入exit或exiting状态，因为父级已将其从DOM中删除。

列表组件：

const ListComponent: React.FC<any> = ({list}): JSX.Element | null => (
    <div className="list-component">
        {list.map((item: any) => (
            <ItemComponent {...item} key={item.uniqueKey} />
        ))}
    </div>
);

使用React Transition（来自React Transition Group）的项目组件

const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out, transform ${duration+200}ms ease-in-out`,
    opacity: 0,
    transform: 'translateY(-10px)'
};

const transitionStyles: any = {
    entering: {
        opacity: 0,
        transform: 'translateY(-10px)'
    },
    entered:  {
        opacity: 1,
        transform: 'translateY(0)'
    },
    exiting: { opacity: 0 } <-- never gets triggered
};

const ItemComponent: React.FC<any> = ({props}) => (
    <Transition in={true} timeout={duration} appear={true} exit={true}>
        {(state) => {
            console.log("state", state); <-- gives entering & entered. Never exit states 
            return (
                <div className={`${CLASS_NAME}`} style={{
                    ...defaultStyle,
                    ...transitionStyles[state]
                }}>
                    // ..content
                </div>
            );
        }}
    </Transition>
);

我该如何控制？我的猜测是应该以某种方式从列表组件处理它。它需要先进行动画处理，然后才能将其真正从DOM中删除。该列表仅呈现该列表。在将动画从DOM中删除之前，如何保护它？

React Transition-当父级从DOM删除项目组件时如何触发退出

0 个答案: