如何让SwitchTranition与TypeScript一起使用CSSTransition

问题描述

因此，我一直在使用react-trasition-group对同一元素的不同状态执行转换，并且所有操作在此都正常。当有多个（两个）元素在其间转换时，会出现问题。我不确定它在documentation中如何工作，但是每当我输入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应该如何工作。任何帮助表示赞赏。|

PS：我已经在Github和Stackoverflow上检查了类似的问题，但显然以前没有人遇到过类似的错误。

编辑：我想我应该做进一步的阐述，因为我有2条建议要求我将布尔值更改为字符串。那不是我的问题。我的问题是过渡本身不起作用，这是由于react-transition-group由于某种原因想要文档中编写的密钥而引起的。我还注意到addEndListener也引起了问题。

解决方法

是的，确实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用于提供对transitions组件的元素引用，以防止出现此错误：

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

react-transition-group reactjs reactjs reactjs reactjs typescript typescript typescript