react項目導入@antv/g2的TypeError: Cannot read property 'appendChild' of null問題解決

這個問題起因是因為id為c11的div標簽不存在導致的，在g2畫圖之前，div並未渲染

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Chart } from '@antv/g2';

ReactDOM.render(
  <React.StrictMode>
    <div id="c11"></div>
  </React.StrictMode>,
  document.getElementById('root')
);

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: 'c11',
    autoFit: false,
    width: 400,
    height: 300,
});

chart.data(data);
chart.scale('sales', {
    ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
    formatter: (val) => `￥${val}`,
});

chart.axis('sales', {
    title: {},
});

chart.interval().position('year*sales');

chart.render();

把g2代碼寫在ReactDom后面就可以解決這個問題，這時候c11已經渲染完了