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已经渲染完了