logo

F2

  • Manual
  • Component Documentation
  • Examples
  • Productsantv logo arrow
  • 5.0.3
  • 顶层 API - F2
  • Chart

顶层 API - F2

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© 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 } 这样的结构