reactjs - 我如何在 TypeScript 中讓 SwitchTransition 與 CSSTransition 一起工作

所以我一直在使用 react-trasition-group 對同一個元素的不同狀態進行過渡動畫，這裡一切運作正常。問題出現在需要在多個（兩個）元素之間進行過渡時。我不確定文檔中是怎麼描述的，但每當我輸入 key 時，TypeScript 就會出錯，告訴我 key 不能是布林值，這完全可以理解，因為 key 是 React 保留用來作為動態生成元素的唯一標識符的。

我的嘗試

const [trigger, setTrigger] = useState(false)

return(
  <SwitchTransition mode="out-in">
    <CSSTransition
      addEndListener={(node: HTMLElement, done: () => void) => {
        node.addEventListener("transitionend", done, false)
      }}
      classNames="myclass"
      key={trigger}
    >
      {trigger ? (
        <p>Render when true</p>
      ) : (
        <p>Render when false</p>
      )}
    </CSSTransition>
  </SwitchTransition>
)

我遇到的錯誤是由上述所寫的事實引起的，我在文檔中找不到 SwitchTransition 應該如何工作的相關說明。任何幫助都將不勝感激。|

附註：我已經在 Github 和 Stackoverflow 上檢查過類似的問題，但顯然之前沒有人遇到過這樣的錯誤。

編輯： 我想我應該更詳細地說明，因為我已經收到兩個建議叫我將布林值改成字串。那不是我的問題。我的問題是過渡本身無法正常工作，這是因為 react-transition-group 不知為何按照文件的說明需要一個 key。我也注意到 addEndListener 也會引起問題。

答案＃1

是的，確實 TypeScript 版本有一些差異。這是一個可運行的版本。

const [trigger, setTrigger] = useState(0);
const nodeRef = useRef<any>(null);
return(
  <div>
    <button onClick={() => setTrigger(trigger + 1)}>toggle</button>
    <SwitchTransition mode="out-in">
      <CSSTransition
        nodeRef={nodeRef}
        addEndListener={(done: () => void) => {
          nodeRef.current?.addEventListener("transitionend", done, false);
        }}
        classNames="myclass"
        key={trigger}
      >
        <div ref={nodeRef}>
            <p>{trigger}</p>
        </div>
      </CSSTransition>
    </SwitchTransition>
  </div>
)

使用 nodeRef 是為了向過渡元件提供元素參考，以防止出現此錯誤：

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

查看示範於: https://stackblitz.com/edit/react-ts-fcyubb?file=index.tsx