如何在打字稿中转换反应转换组代码？

如何解决如何在打字稿中转换反应转换组代码？

我是 Typescript 的新手，很难将这个 react-transition-group 代码转换为 Typescript。我不知道打字稿要求的许多类型定义。我使用了@types/react-transition/group。 这是代码的代码和框链接：https://codesandbox.io/s/serene-lake-x1ppo?file=/src/Transitions.tsx

我正在使用

• “反应”：“17.0.2”
• "next": "11.0.1",
• 打字稿": "4.3.5"

import React,{ useRef,useEffect,useContext } from 'react';
import { CSSTransition as ReactCSSTransition } from 'react-transition-group';

const TransitionContext = React.createContext({
  parent: {},})

function useIsInitialRender() {
  const isInitialRender = useRef(true);
  useEffect(() => {
    isInitialRender.current = false;
  },[])
  return isInitialRender.current;
}

function CSSTransition({
  show,enter = '',enterStart = '',enterEnd = '',leave = '',leaveStart = '',leaveEnd = '',appear,unmountOnExit,tag = 'div',children,...rest
}) {
  const enterClasses = enter.split(' ').filter((s) => s.length);
  const enterStartClasses = enterStart.split(' ').filter((s) => s.length);
  const enterEndClasses = enterEnd.split(' ').filter((s) => s.length);
  const leaveClasses = leave.split(' ').filter((s) => s.length);
  const leaveStartClasses = leaveStart.split(' ').filter((s) => s.length);
  const leaveEndClasses = leaveEnd.split(' ').filter((s) => s.length);
  const removeFromDom = unmountOnExit;

  function addClasses(node,classes) {
    classes.length && node.classList.add(...classes);
  }

  function removeClasses(node,classes) {
    classes.length && node.classList.remove(...classes);
  }

  const nodeRef = React.useRef(null);
  const Component = tag;

  return (
    <ReactCSSTransition
      appear={appear}
      nodeRef={nodeRef}
      unmountOnExit={removeFromDom}
      in={show}
      addEndListener={(done) => {
        nodeRef.current.addEventListener('transitionend',done,false)
      }}
      onEnter={() => {
        if (!removeFromDom) nodeRef.current.style.display = null;
        addClasses(nodeRef.current,[...enterClasses,...enterStartClasses])
      }}
      onEntering={() => {
        removeClasses(nodeRef.current,enterStartClasses)
        addClasses(nodeRef.current,enterEndClasses)
      }}
      onEntered={() => {
        removeClasses(nodeRef.current,[...enterEndClasses,...enterClasses])
      }}
      onExit={() => {
        addClasses(nodeRef.current,[...leaveClasses,...leaveStartClasses])
      }}
      onExiting={() => {
        removeClasses(nodeRef.current,leaveStartClasses)
        addClasses(nodeRef.current,leaveEndClasses)
      }}
      onExited={() => {
        removeClasses(nodeRef.current,[...leaveEndClasses,...leaveClasses])
        if (!removeFromDom) nodeRef.current.style.display = 'none';
      }}
    >
      <Component ref={nodeRef} {...rest} style={{ display: !removeFromDom ? 'none': null }}>{children}</Component>
    </ReactCSSTransition>
  )
}

function Transition({ show,...rest }) {
  const { parent } = useContext(TransitionContext);
  const isInitialRender = useIsInitialRender();
  const isChild = show === undefined;

  if (isChild) {
    return (
      <CSSTransition
        appear={parent.appear || !parent.isInitialRender}
        show={parent.show}
        {...rest}
      />
    )
  }

  return (
    <TransitionContext.Provider
      value={{
        parent: {
          show,isInitialRender,},}}
    >
      <CSSTransition appear={appear} show={show} {...rest} />
    </TransitionContext.Provider>
  )
}

export default Transition;