1

我在项目的过渡方面遇到了一些麻烦。

所以我在新路由的页面加载之间有一个过渡，比如淡入淡出。

像这样：

         <ReactCSSTransitionGroup
                        transitionName="page-swap"
                        className="page-animation"
                        component="div"
                        //transitionAppear
                        transitionEnter={this.props.loading}
                        transitionEnterTimeout={1000}
                        transitionAppearTimeout={1000}
                        transitionLeaveTimeout={1000}>
                        {!this.props.loading &&
                            React.cloneElement(this.props.children, { key: location.pathname, props: this.props })
                        }
                        {this.props.loading &&
                            <div key="loading-state">
                                <Loading />
                            </div>
                        }
                    </ReactCSSTransitionGroup>

由于我需要在加载组件之前加载信息，因此我在从服务器获取信息时使用相同的加载组件，如下所示：

 if (!terms || terms.isFetching) {
        return (
            <Loading />
        );
    }

    if (terms.error !== undefined) {
        return (
            <div>Error</div>
        );
    }

    return (
        <div className="support-page text">
            info rendered.....
        </div>
    );

所以我的麻烦是，当转换正在执行时，我的组件会渲染并显示另一个加载组件。

所以我一直在浏览互联网，发现我可以使用低级 API 来获取转换时的生命周期事件。因此，如果我可以使用该生命周期，我就会知道我的过渡是否结束。所以我使用了这个：

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

 ......
<TransitionGroup
                        className="page-animation"
                        component="div"
                    >
                        {!this.props.loading &&
                            React.cloneElement(this.props.children, { key: location.pathname, props: this.props })
                        }
                        {this.props.loading &&
                            <div key="loading-state">
                                <Loading />
                            </div>
                        }
                    </TransitionGroup>

并在称为生命周期事件的子组件上

class ChildComponent extends React.Component {

componentWillMount() {
    this.props.fetchTermsIfNeeded();
}

componentWillEnter(callback) {
    callback();
    console.log('componentWillEnter');
}

componentDidEnter() {
    console.log('componentDidEnter');
}

componentWillLeave(callback) {
    callback();
    console.log('componentWillLeave');
}

componentDidLeave() {
    console.log('componentDidLeave');
}

render() {
    const terms = this.props.support.terms;
    const DOMPurify = createDOMPurify(typeof window !== 'undefined' ? window : fakeWindow);

    if (!terms || terms.isFetching) {
        return (
            <Loading />
        );
    }
    if (terms.error !== undefined) {
    return (
        <div>Error</div>
    );
}

return (
    <div className="support-page text">
        info rendered.....
    </div>
);
}
}

所以我期待一些 console.log 信息，但我似乎没有触发这个低级 API 的任何生命周期事件。

所有 tis 信息都基于这个小提琴 https://jsfiddle.net/Lhtoxsds/但我仍然无法执行生命周期事件

有人可以帮忙吗？

4

0 回答 0