logo

F2

  • 教程
  • 组件API
  • 图表示例
  • 所有产品antv logo arrow
  • 5.0.3
  • 快速上手
  • 图表组成
  • 图形语法
  • 数据 - Data
  • 度量 - Scale
  • 坐标系 - Coordinate
  • 图形标签 - Shape
  • 绘图属性 - Style
  • 动画属性 - Animation
  • 事件属性 - Event
  • 图形使用 - JSX
  • 组件介绍 - Component
  • 多端/框架 - Framework
    • 多端适配
    • 如何在 React 中使用
    • 如何在 Vue 中使用
    • 如何在小程序中使用
    • 如何在 Node.js 中使用
    • 配置 jsx transform
    • 使用 svg 渲染
  • 进阶 - Advanced
    • 自定义 View
  • 常见问题 - Question
    • 和 React 同时使用时,TS 类型报错

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

上一篇
自定义 View

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

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

问题原因

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

解决方式

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

1. classic 编译模式

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

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

2. automatic 编译模式

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

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

注意事项

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