在 react-transition-group 中放置回调函数的位置答案

【问题标题】：Where to put callback function in react-transition-group在 react-transition-group 中放置回调函数的位置
【发布时间】：2019-12-05 12:35:11
【问题描述】：

我只想在过渡结束后运行一个进程。

这里的文档说：

addEndListener

添加自定义过渡结束触发器。使用过渡 DOM 调用节点和完成的回调。允许更细粒度的过渡结束逻辑。注意：如果提供超时，仍将其用作后备。
addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}

所以我这样使用它：

<Transition
  addEndListener={(node, done) => {node.addEventListener('transitionend', done, false);}}>
  <MyComponent />
</Transition>

问题是我不知道在过渡结束后将要执行的函数放在哪里。

如果这是我的功能：

function abc() {
  // blah
  // blah
  //blah
}

我可以把它放在哪里？我应该把它放在done的位置吗？

【问题讨论】：

标签： javascript reactjs addeventlistener react-transition-group

【解决方案1】：

您可以使用addEndListener，甚至可以使用onExited 和onEntered 回调。

addEndListener:

function abc() {
  // blah
  // blah
  //blah
}

... // some code

<Transition
  addEndListener={(node, done) => {node.addEventListener('transitionend',(e) => {
    abc(e);
    done(e);
  }, false);}}>
  <MyComponent />
</Transition>

使用onEntered 和onExited：

<Transition
   onEntered={abc} onExited={abc}>
  <MyComponent />
</Transition>

第二个例子的重要一点：检查你想要调用回调的时刻。

【讨论】：