未调用 ReactCSSTransitionGroup componentWillLeave

IT技术 javascript reactjs ecmascript-6 transition
2021-04-29 07:53:21

我正在尝试使用 ReactCssTransition 但不知何故未调用该事件（componentWillLeave）

这是我的组件

import React, { Component } from 'react'
import TransitionGroup from 'react-addons-css-transition-group'

export default class TransitionComponent extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      let {componentKey} = this.props
      <TransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
        <Item key={"item"+componentKey} />
      </TransitionGroup>
    );
  }
}

和子组件

class Item extends Component {

  componentDidEnter() {
    console.log("component did enter");
  }

  componentWillLeave(callback) {
    console.log("component will leave");
  }

  render() {
    return (
      <div>Item</div>
    )
  }
}

有什么线索吗？谢谢！

2个回答

由于没有在“componentWillEnter”函数中调用回调，我遇到了类似的问题。引用 React文档

它将阻止其他动画的发生，直到调用回调

class Item extends Component {

    componentWillEnter(callback) {
        console.log("component will enter");
        callback();
    }

    componentDidEnter() {
        console.log("component did enter");
    }

    componentWillLeave(callback) {
        console.log("component will leave");
        callback();
    }

    render() {
        return (
            <div>Item</div>
        )
    }
}

请原谅我，因为我自己是 React 的新手，但我的理解是，当安装/卸载组件时，您将不会获得 componentDidEnter() 和 componentWillLeave() 生命周期挂钩。

您可以使用的只是 componentDidMount() 和 componentWillUnmount()。

所以用这个替换上面的部分，你应该看到你的控制台日志：

  componentDidMount() {
    console.log('Component did mount');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

我相信如果您想访问所有需要使用 ReactTransitionGroup 的生命周期钩子，我还没有想出如何实现这一点。

在 Medium 上有一篇很好的文章，尽管作者解释得很好。

文章中有一点她谈到用 ReactTransitionGroup 组件包装她的子组件，我相信这就是您正在寻找的。基本上把它包裹在你当前的<Item />......

其它你可能感兴趣的问题
上一篇无法导入@material-ui/core/styles/MuiThemeProvider 下一篇归位损坏限位开关 Ender 3