React中如何让AntV X6自定义组件填满父容器？

要让X6组件动态填满父容器，核心思路是动态获取父容器的实时尺寸，并同步更新Graph的宽高——因为X6的Graph API仅接受数值类型的宽高参数，直接传undefined无法触发自适应。具体实现步骤如下：

1. 配置父容器样式 #

首先确保父容器的尺寸能被正确识别，给父容器设置如下样式：

.x6-wrapper {
  width: 100%;
  height: 100%;
  position: relative; /* 避免容器尺寸计算异常 */
}

2. 用React Ref获取容器并初始化Graph #

通过useRef获取父容器DOM，在组件挂载时读取容器初始尺寸，以此初始化Graph：

import React, { useRef, useEffect } from 'react';
import { Graph } from '@antv/x6';

const AntVX6Comp = () => {
  const containerRef = useRef(null);
  const graphRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // 获取父容器初始宽高
    const { clientWidth, clientHeight } = container;

    // 初始化Graph，传入容器实时尺寸
    const graph = new Graph({
      container: container,
      width: clientWidth,
      height: clientHeight,
      // 其他Graph配置示例
      background: {
        color: '#F2F7FA',
      },
    });
    graphRef.current = graph;

    // 定义尺寸更新函数
    const updateGraphSize = () => {
      if (!container) return;
      const { clientWidth, clientHeight } = container;
      graph.resize(clientWidth, clientHeight);
    };

    // 监听窗口resize事件，同步更新尺寸
    window.addEventListener('resize', updateGraphSize);

    // 监听父容器自身尺寸变化（比如父容器由其他组件动态调整）
    const resizeObserver = new ResizeObserver(updateGraphSize);
    resizeObserver.observe(container);

    // 组件卸载时清理资源
    return () => {
      window.removeEventListener('resize', updateGraphSize);
      resizeObserver.unobserve(container);
      graph.dispose();
    };
  }, []);

  return <div ref={containerRef} className="x6-wrapper" />;
};

export default AntVX6Comp;

关键说明 #

• 用ResizeObserver监听父容器自身的尺寸变化，比单纯监听window.resize更精准，能覆盖父容器因非窗口变化导致的尺寸调整场景（比如侧边栏折叠、Tab切换等）。
• 组件卸载时必须移除监听并调用graph.dispose()，避免内存泄漏。
• 父容器的width:100%和height:100%需要确保它的父级容器也有明确的尺寸，否则无法正确继承。

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