將回調函數放在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>

第二個示例的重要事項：檢查何時要調用回調。