logo

F2

  • 教程
  • 组件API
  • 图表示例
  • 所有产品antv logo arrow
  • 5.0.3
  • 顶层 API - F2
  • 组件 - Component
  • 画布 - Canvas
  • 时间轴 - Timeline
  • 图表 - Chart
    • 图表 - Chart
    • 几何标记 - Geometry
    • 线 - Line
    • 区间 - Interval
    • 点 - Point
    • 面积 - Area
    • K 线图 - Candlestick
    • 坐标轴 - Axis
    • 图例 - Legend
    • 提示 - tooltip
    • 标注 - Guide
    • 滚动条 - ScrollBar

顶层 API - F2

下一篇
组件 - Component

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...

顶层 API

  • Children:children 的处理方法
  • Component:组件
  • Canvas:画布组件
  • Timeline:组件事件轴
  • Chart:图表组件

Children

提供了用于处理 this.props.children 的方法

Children.map(children, callback)

类似 Array.map 遍历并返回新的对象

import { Children } from '@antv/f2';
Children.map(this.props.children, (child) => {
// TODO
return child;
});

Children.cloneElement(child, props)

复制一个新元素

import { Children } from '@antv/f2';
Children.map(this.props.children, (child) => {
return Children.cloneElement(child, { ... });
});

Children.toArray(children)

转换成数组

import { Children } from '@antv/f2';
const childrenArray = Children.toArray(children);

createElement / jsx(type, props, ...children)

提供生成 jsx 元素的方法,createElement(type, props, ...children) 和 jsx(type, props, ...children) 是完全一致的

import { createElement, Chart } from '@antv/f2';
// 创建 chart 元素
const element = createElement(Chart, { data }, [...]);

createRef()

提供了创建 ref 的方法

import { createRef } from '@antv/f2';
// 创建 chart 元素
const ref = createRef(); // 生成 { current: null } 这样的结构