如何让 SwitchTranition 与带有 TypeScript 的 CSSTransition 一起使用答案

【问题标题】：How do I get SwitchTranition to work with CSSTransition with TypeScript如何让 SwitchTranition 与带有 TypeScript 的 CSSTransition 一起使用
【发布时间】：2021-01-15 10:56:00
【问题描述】：

所以我一直在使用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 也引起了问题。

【问题讨论】：

所以把它改成字符串而不是布尔值。

标签： reactjs typescript react-transition-group

【解决方案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

【讨论】：