Amcharts5 - 错误你不能在同一个 DOM 节点上有多个根 - React 17

Question

我想在我的 React 应用程序中使用 amcharts5 创建图表。

我在我的应用程序组件中导入的组件中实例化 amcharts5 的根元素。我收到以下错误

You cannot have multiple Roots in the same DOM node

这是我的版本：

"react": "^17.0.2"
"@amcharts/amcharts5": "^5.1.1"

这是我的代码：

import { useLayoutEffect } from 'react'
import * as am5 from '@amcharts/amcharts5'

export default function AmCharts5() {
  useLayoutEffect(() => {
    let root = am5.Root.new('chartdiv')

    // root.current = root
    // here is a second Error : Property 'current' does not exist on type 'Root'


    return () => {
      root.dispose()
    }
  }, [])

  return <div id="chartdiv" style={{ width: '100%', height: '500px' }}></div>
}

Answer 1

当我为图表图例创建第二个根元素时，我遇到了同样的错误，但忘记在 useEffect 返回函数中添加此根元素的 dispose 方法。因此，就我而言，我通过在 useEffect 返回函数中添加第二个 dispose 方法来解决此错误。

就我而言，useEffect 依赖于某些数据，当我更改它时，useEffect 再次运行，并尝试创建具有相同名称的第二个根元素。在第一次渲染后，当我更改 someVar 时，出现此错误。

前：

useEffect(() => {
    const root = am5.Root.new("chart-pop");
    // ... some code

    const legendRoot = am5.Root.new("legend-div");
    // ... some code

    return () => root.dispose();
}, [someVar]);

后：

useEffect(() => {
    const root = am5.Root.new("chart-pop");
    // ... some code

    const legendRoot = am5.Root.new("legend-div");
    // ... some code

    return () => {root.dispose(); legendRoot.dispose();};
}, [someVar]);