React函数式组件中Graphin的ResizeCanvas组件graphDOM参数困惑

核心说明 #

graphDOM 是Graphin组件渲染后生成的画布根DOM元素，ResizeCanvas行为需要通过它监听容器尺寸变化，实现画布自适应缩放。在函数式组件中，我们可以通过React的useRef钩子来获取这个DOM元素。

具体实现步骤 #

• 导入React的useRef钩子
• 创建ref对象，通过ref属性绑定到<Graphin>组件上
• 将ref的current值传入ResizeCanvas的graphDOM参数

修改后的完整代码 #

import React, { useRef } from 'react';
import { Graphin, DragNode, ResizeCanvas, ActivateRelations } from '@antv/graphin';

const TheGraph = () => {
  // 创建ref用于获取Graphin的DOM元素
  const graphRef = useRef(null);

  return (
    <Graphin
      ref={graphRef} // 将ref绑定到Graphin组件
      data={data}
      fitView={true}
      layout={{
        type: 'gForce',
        linkDistance: 10,
        preventOverlap: true,
        workerEnabled: true,
        gpuEnabled: true,
        maxIteration: 300,
      }}
    >
      <DragNode/>
      <ResizeCanvas graphDOM={graphRef.current}/> {/* 传入获取到的DOM */}
      <ActivateRelations trigger="click"/>
    </Graphin>
  )
}

补充说明 #

组件首次渲染完成后，graphRef.current会被赋值为Graphin的根DOM元素，ResizeCanvas就能通过它正确监听容器尺寸变化，实现画布的自适应调整。

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