AntV F2 在 React 项目中不能正常渲染问题

问题

F2在React中不能正常渲染。

原因

没有使用@antv/f-react依赖下的Canvas，而是用了默认@antv/f2依赖中的Canvas。

解决

安装依赖

npm install @antv/f-react -D

导入组件：Canvas来自@antv/f-react，其他组件来自@antv/f2。

import Canvas from '@antv/f-react';
import {Axis, Chart, Interval, Tooltip } from "@antv/f2";

const [stat, setStat] = useState([])

<Canvas>
    <Chart
        data={stat}
        scale={{
            month: {
                type: 'cat',
            },
        }}
    >
        <Axis field="month" />
        <Axis field="expense" />
        <Interval x="month" y="expense" />
        <Tooltip />
    </Chart>
</Canvas>

官方文档

https://antv.antgroup.com