Question

我设置Fade过渡的代码最简单：

import React from 'react';
import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';

const duration = 250;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out, color ${duration}ms ease-in-out`,
  opacity: 0,
}


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


export default class Fade extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      in: false,
    };
  }

  componentDidMount() {
    this.setState({ in: true });
  }
  componentWillUnmount() {
    this.setState({ in: false });
  }

  render() {

    return(
      <Transition in={!!this.state.in} timeout={{ enter: 250, exit: 250, }} unmountOnExit={this.props.unmountOnExit || false} >
        {(state) => {
          return (
            <div 
              className={this.props.classes ? this.props.classes : ''} 
              style={{  ...defaultStyle, ...transitionStyles[state],}}>
              {this.props.children}
            </div>
          )
        }}
      </Transition>
    )
  }
}

Fade.propTypes = {
  classes: PropTypes.string,
};

将您的任何组件包裹起来进行试用。我尝试使用它构建一个代码片段，但我没有成功使用React构建一个，对不起。

我的问题：感谢componentDidMount我可以切换组件的状态并使淡入淡出工作。但是，我很难实现淡出：使用componentWillUnmount并不能使它发挥作用。

我的问题的解决方案是什么？我应该如何延迟卸载组件才能进行转换？

使用react-transition-group v2卸载组件时的基本转换（March 2018）

0 个答案: