【G2的interaction.tooltip.render】无法支持return一个DOM

[HenryLee951020]

问题描述

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[HenryLee951020]

但是在@ant-design/plots中是支持的？？？？？？

[pearmini]

请提供复现 demo，如下代码是没有问题的：

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

chart
  .interval()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
  })
  .transform([{ type: 'sortX', by: 'y', reverse: true }])
  .encode('x', 'letter')
  .encode('y', 'frequency');

chart.interaction('tooltip', {
  render: (event, { title, items }) => document.createTextNode('hello'),
});

chart.render();

[HenryLee951020]

import { Chart } from '@antv/g2';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
  { year: '1959 年', sales: 38 },
  { year: '1960 年', sales: 38 },
  { year: '1962 年', sales: 38 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .interval()
  .coordinate({ transform: [{ type: 'transpose' }] })
  .data(data)
  .encode('x', 'year')
  .encode('y', 'sales')
  chart.interaction('tooltip', {
  render: (event, { title, items }) => {
     return <div>hello</div>
  },
});

chart.render();

这里只能return字符串模板 与文档内的返回类型不符合

[HenryLee951020]

为啥@ant-design/plots反倒是可以G2不是基础组件么

[pearmini]

你的写法返回的是一个 jsx，不是 DOM。Ant Design Charts 的编辑器支持 jsx 语法，G2 不是 React 组建，所以不支持。如果希望 G2 渲染 React 节点，需要调用 React.createRoot().render + 打包工具将 jsx 转译。