在 React 中初始化 ECharts

习惯了传统的 DOM 操作，在页面上使用 ECharts 似乎感觉更方便，好比：

var myChart = echarts.init(document.getElementById('main'));

但是在使用了 React 这种 声明式/组件化 的 JavaScript 库之后，对于 DOM 的操作大大减少了，那么在 React 中该如何初始化一个 ECharts 对象呢？

import { useEffect, useRef } from "react";
import * as echarts from "echarts";

let option = {
    ...
};

function Chart(props: any) {
  let myChart = useRef<echarts.EChartsType | null>(null);

  const renderChart = () => {
    if (myChart.current === null) {
      return;
    }
    myChart.current.setOption(option);
  };

  useEffect(() => {
    renderChart();
  }, []);

  return (
    <div
      ref={(e) => {
        if (e !== null) {
          myChart.current = echarts.init(e);
        }
      }}
      className={props.className}
    ></div>
  );
}

😶 上面是更好的方式吗 ❓