无法通过ID获取VictoryChart且返回NULL，如何解决该问题？

为什么document.getElementById返回null？ #

• VictoryChart是React组件，不是原生DOM元素，你直接给它设置的id属性不会传递到最终渲染的DOM节点上。VictoryChart最终会渲染成<svg>标签，但这个svg不会自动继承你给组件设置的id。
• 另外如果调用getElementById的时机早于组件挂载完成，也会返回null，但核心原因是前者。

两种获取VictoryChart对应DOM元素的方法 #

方法1：使用React的Ref（推荐） #

React的Ref可以直接获取组件渲染后的DOM节点，适合React项目的常规操作：

import { useRef, useEffect } from 'react';
import { VictoryChart, VictoryScatter, VictoryTheme } from 'victory';

function YourComponent() {
  // 创建ref对象
  const chartRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成后，chartRef.current就是VictoryChart渲染出的svg元素
    if (chartRef.current) {
      console.log(chartRef.current);
      // 这里可以用file-saver处理这个svg
    }
  }, []);

  return (
    <div className="chart-wrapper">
      <VictoryChart
        ref={chartRef} // 将ref绑定到VictoryChart
        height={500} width={1000}
        theme={VictoryTheme.material}
        padding={{top: 50, bottom: 30, left: 125, right: 30}}
        domain={{x: [0, 10], y: [0, 10]}}
      >
        <VictoryScatter
          labelComponent={<VictoryTooltip
            cornerRadius={15}
            pointerLength={75}
            flyoutWidth={260}
            flyoutHeight={100}
            style={{fontSize: '27px'}}
          />}
          style={{ data: {
              fill: "#c43a31",
              stroke: "#000000",
              fillOpacity: 0.7,
              strokeWidth: 3,
              axis: 10
            }, }}
          size={15}
          data={data.mostUsedScenarios.timeScenarioGraphData.map((d) => ({ x: d.name, y: d.date, label: d.name + "\n" + d.date }))}
        />
      </VictoryChart>
    </div>
  );
}

方法2：通过containerProps设置id #

VictoryChart提供了containerProps属性，可以给它渲染的根DOM节点（svg）设置id，这样就能用document.getElementById获取：

<div className="chart-wrapper">
  <VictoryChart
    containerProps={{ id: "latestScenariosGraph" }} // 用containerProps传递id
    height={500} width={1000}
    theme={VictoryTheme.material}
    padding={{top: 50, bottom: 30, left: 125, right: 30}}
    domain={{x: [0, 10], y: [0, 10]}}
  >
    <VictoryScatter
      labelComponent={<VictoryTooltip
        cornerRadius={15}
        pointerLength={75}
        flyoutWidth={260}
        flyoutHeight={100}
        style={{fontSize: '27px'}}
      />}
      style={{ data: {
          fill: "#c43a31",
          stroke: "#000000",
          fillOpacity: 0.7,
          strokeWidth: 3,
          axis: 10
        }, }}
      size={15}
      data={data.mostUsedScenarios.timeScenarioGraphData.map((d) => ({ x: d.name, y: d.date, label: d.name + "\n" + d.date }))}
    />
  </VictoryChart>
</div>

注意：要确保调用document.getElementById("latestScenariosGraph")的时机是在组件挂载完成后，比如放在React的useEffect或componentDidMount钩子中，否则DOM还未生成，仍会返回null。

内容的提问来源于stack exchange，提问作者sretkaya