7-8自定义props类型继承CSSTransitionProps的时候报错

Question

编辑器提示这是一个type不能被继承

Answer 1

张轩 2020-03-21 11:02:46

同学你好 经过调查发现 是因为 @types/react-transition-group 类型定义文件升级所致

我之前的版本是 4.2.3 它是这样实现的

1	export interface TransitionProps extends TransitionActions

现在最新版本是 4.2.4 它的实现变成了这样

1	export type TransitionProps = TimeoutProps | EndListenerProps;

由于 TransitionProps 变成了联合类型 所以报错了

这里先建议你 安装旧版的 类型文件，也就是 4.2.3

我会在之后更新代码，修复这部分的问题，非常感谢你找到的错误！学习的非常认真。

Answer 2

张轩 2020-03-21 12:28:21

问题已经解决 

新代码已经提交至 master 分支

这个是提交的 commit：https://git.imooc.com/coding-428/vikingship/commit/adeee24f06f319fbe1d472a1ae33c54a0e16d0da

1 2 3 4 5 6 7 8 9

-interface TransitionProps extends CSSTransitionProps {           +type TransitionProps = CSSTransitionProps & {          animation?: AnimationName,          wrapper? : boolean,        }

使用 type 代替 interface 的实现。

谢谢同学提出的问题

• 慕娘2597344 #1

  transition.tsx文件的代码如下
  
  import React from 'react'
  import {CSSTransition} from 'react-transition-group'
  import {CSSTransitionProps} from 'react-transition-group/CSSTransition'
  
  type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right';
  
  type TransitionProps = CSSTransitionProps & {
    animation?: AnimationName,
    wrapper?: boolean,
  }
  
  const Transition: React.FC<TransitionProps> = (props) => {
    const {classNames, children, animation, wrapper, ...restProps} = props;
    return (
      <CSSTransition {...restProps} className={classNames ? classNames : animation}>
         {wrapper ? <div>{children}</div> : children}
      </CSSTransition>
    )
  }
  
  Transition.defaultProps = {
    unmountOnExit: true,
    appear: true
  }
  
  export default Transition
  
  
  
  这么写了以后 其他的文件都跟你这个版本的一样 点击toggle按钮以后 后面div的样式也添加了对应的动画名称比如zoom-in-left 但是却没有动画效果

Answer 3

慕粉2320242086 2022-11-12 16:06:16

老师为什么不重新录制过时的内容？或者在视频里做些做些标注呢？不会因为懒把，哈哈

• 张轩 #1

  同学你好 一些定义文件会时常更新 会造成一些不兼容的情况 如果更新这一小部分的内容的话 后面的视频有时候不会很连贯 不如使用文字的方式点出 大块的内容我们都是视频更新的方式的 谢谢同学的意见

Answer 4

提问者 110市井小明 2020-03-20 20:17:03

是在CSSTransition.d.ts引入的啊

Answer 5

张轩 2020-03-20 18:50:24

同学你好 你这个 CSSTransitionProps 是从哪里导入的？ 看起来不太一样

• 提问者 110市井小明 #1

  老师你好,在我将你的代码拉取下来,安装完所有依赖后,依旧还是报这个错误