Question

我在项目转换方面遇到了一些麻烦。

所以我有一个转换，比如新路线的页面加载之间的淡入淡出。

就像这样：

         <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的任何生命周期事件。

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

有人可以帮忙吗？

React Transition Group生命周期事件未触发

0 个答案: