和 React 同时使用时,TS 类型报错

阅读时间约 2 分钟

当和 React 同时使用时,碰到 group, circle, rect 等这些标签的类型提示错误时,如下图所以

问题原因

因为 React svg 的标签类型里也有 circlerect 等这些标签,这些和 F2 定义的冲突了,需要我们再单独引入 F2 标签定义的命名空间

解决方式

  1. 先确定当前项目的 jsx 编译模式,打开 tsconfig.json
  2. 找到 compilerOptions 下的 jsx 配置项,如果没有则默认为 reactreactclassic 编译模式,react-jsxautomatic 编译模式

1. classic 编译模式

在文件顶部增加如下注释代码和模块引用

/** @jsx jsx */
import { jsx } from '@antv/f2';
...

2. automatic 编译模式

在文件顶部增加如下注释代码

/** @jsxImportSource @antv/f2 */
...
  1. 完成后即可解决类型错误问题

注意事项

因为代码编译是以文件为单位的,在一个文件里只能使用一种标签类型,如果是在同一文件中的,需要再新建一个新的文件