将回调函数放在 react-transition-group 的什么地方

Question

我想运行仅在转换结束后进行处理。

这里的文档说：

addEndListener

Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.
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>

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

将回调函数放在 react-transition-group 的什么地方

Where to put callback function in react-transition-group

javascript

addeventlistener

reactjs

react-transition-group