和 React 同时使用时,TS 类型报错
当和 React 同时使用时,碰到 group
, circle
, rect
等这些标签的类型提示错误时,如下图所以
问题原因
因为 React svg 的标签类型里也有 circle
, rect
等这些标签,这些和 F2 定义的冲突了,需要我们再单独引入 F2 标签定义的命名空间
解决方式
- 先确定当前项目的 jsx 编译模式,打开
tsconfig.json
- 找到
compilerOptions
下的jsx
配置项,如果没有则默认为react
,react
为 classic 编译模式,react-jsx
为 automatic 编译模式
1. classic 编译模式
在文件顶部增加如下注释代码和模块引用
/** @jsx jsx */
import { jsx } from '@antv/f2';
...
2. automatic 编译模式
在文件顶部增加如下注释代码
/** @jsxImportSource @antv/f2 */
...
- 完成后即可解决类型错误问题
注意事项
因为代码编译是以文件为单位的,在一个文件里只能使用一种标签类型,如果是在同一文件中的,需要再新建一个新的文件