2

我有一个反应应用程序，我正在使用包中的<Transition>组件react-transition-group在创建和销毁组件时创建过渡动画。我在循环中设置了in 道具。但是，当组件即将被销毁时componentWillMount，我似乎无法弄清楚如何恢复in 道具。文档并没有真正说明退出过渡

这是我的代码：

const defaultStyle = {
    transition: `opacity 1000ms ease-in-out`,
    opacity: 0,
    padding: 20,
    display: 'inline-block',
    backgroundColor: '#8787d8'
};

const transitionStyles = {
    entering: { opacity: 0 },
    entered: { opacity: 1 },
    exiting: { opacity: 1 },
    exited: { opacity: 0 },
};

export default class Home extends Component {

    constructor() {
        super();
        this.state = {
            in: false
        }
    }

    componentWillMount() {
        const home = this;

        // This: Works Perfectly
        home.setState({ in: true });
    }

    componentWillUnmount() {
        const home = this;

        // This: Not so much
        home.setState({ in: false });
    }

    render() {
        return (
            <Transition in={ this.state.in } timeout={ 0 }>
                {(state) => (
                    <div className="page" style={{
                        ...defaultStyle,
                        ...transitionStyles[state]
                    }}>
                        I'm A fade Transition!
                    </div>
                )}
            </Transition>
        )
    }
}
4

1 回答 1

0

您能否确认您的组件实际上正在卸载并且componentWillUmount()正在被调用？v2 文档似乎建议组件即使在达到exited过渡状态后仍保留在 DOM 中。它们公开了一个unmountOnExit prop应该强制组件在达到退出状态后卸载的内容。根据文档：

默认情况下，子组件在达到“退出”状态后保持挂载。如果您希望在组件退出后卸载组件，请设置 unmountOnExit。

于 2017-12-17T16:58:32.420 回答