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

Question

我只想在转换结束后才运行一个进程。

这里的文档说：

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的地方吗？

Answer 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>

第二个示例的重要事项：检查何时要调用回调。