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

Question

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

这里的文档说：

添加结束监听器

添加自定义转换结束触发器。使用正在转换的 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>

第二个示例的一个重要事项是：检查您想要调用回调的时刻。