React Transition - как вызвать выход, когда родитель удаляет компонент элемента из DOM - PullRequest
Новая
       28

React Transition - как вызвать выход, когда родитель удаляет компонент элемента из DOM

0 голосов
/ 13 февраля 2019

У меня есть довольно простой компонент списка, который отображает список компонентов элемента в зависимости от состояния избыточности.Когда компонент списка удаляет элемент из списка, компонент элемента не переходит в состояние 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>
);

Компонент элемента, который использует Реактивный переход (От Реактивная группа перехода ) 

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?

...