在ResponsiveReactGridLayout中获取父元素尺寸适配Candlestick组件

类型报错修复 #

Property 'width' does not exist on type 'never' 是TypeScript未识别ref类型导致的，初始化useRef时指定绑定的DOM类型为HTMLDivElement即可解决：

// 错误写法
const canvasRef = useRef(null);
// 修正写法
const canvasRef = useRef<HTMLDivElement>(null);

读取DOM尺寸方案 #

组件首次渲染阶段DOM还未挂载，直接读取ref.current必然返回null。你需要新增state存储尺寸，在DOM挂载完成后读取初始值，同时监听网格布局的 resize 事件同步更新尺寸，修改后的完整代码如下：

const Home = () => {
  const [coins, setCoins] = useState(latestCoins);
  const [coin, setCoin] = useState(curCoin);
  const canvasRef = useRef<HTMLDivElement>(null);
  // 存储容器宽高
  const [cardSize, setCardSize] = useState<{width: number, height: number} | null>(null);

  // 同步容器尺寸方法
  const updateCardSize = () => {
    if (canvasRef.current) {
      setCardSize({
        width: canvasRef.current.offsetWidth,
        height: canvasRef.current.offsetHeight
      })
    }
  }

  useEffect(() => {
    getCoins().then((data) => setCoins(data));
    // 组件挂载后读取初始尺寸
    updateCardSize();
    // 监听容器尺寸变化自动同步，适配窗口缩放、网格调整等所有场景
    const resizeObserver = new ResizeObserver(updateCardSize);
    if (canvasRef.current) {
      resizeObserver.observe(canvasRef.current);
    }
    return () => resizeObserver.disconnect();
  }, []);

  return (
    <ResponsiveReactGridLayout
      onResize={updateCardSize}
      className="layout"
      layouts={layouts}
      rowHeight={100}
      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
      cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
    >
     
      <div key="candlestick" className="home-card" ref={canvasRef}>
        {/* 宽高读取完成后再渲染图表组件 */}
        {cardSize && <Candlestick coin={coin} width={cardSize.width} height={cardSize.height} />}
      </div>
    </ResponsiveReactGridLayout>
  );
};

以上方案可以让Candlestick组件始终占满父容器的全部空间，不需要手动写死宽高数值。

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