Typescript 不能使用 animateMotion

Question

当我尝试在 React 组件中使用 animateMotion 时，Typescript 报错。

Property 'animateMotion' does not exist on type 'JSX.IntrinsicElements'.

Property 'mpath' does not exist on type 'JSX.IntrinsicElements'.

代码

import * as React from 'react'

type OrbitProps = {
  duration: number;
  radius: number;
}

export const Orbit: React.FunctionComponent<OrbitProps>= ({duration, radius}) => {
  const cx = 50
  const cy = 50
  return (
      <g>
        <path
          d={`M ${cx}, ${cy}
          m -${radius}, 0
          a ${radius},${radius} 0 1,0 ${radius*2},0
          a ${radius},${radius} 0 1,0 -${radius*2},0`}
          id="ellipse1"
        />
        <circle r="3">
          <animateMotion dur={`${duration}s`} repeatCount="indefinite">
            <mpath xlinkHref="#ellipse1" />
          </animateMotion>
        </circle>
      </g>
  )
}

Answer 1

你安装了吗npm install @types/react --save？

Answer 2

已编辑：

declare namespace JSX { 
  interface IntrinsicElements { 
    "animateMotion": any,
    "mpath": any, 
  } 
}

来源：https://www.typescriptlang.org/docs/handbook/jsx.html

Typescript 不能使用 animateMotion

Typescript can't use animateMotion

svg

typescript

svg-animate

reactjs

代码