React 获取 ResponsiveReactGridLayout 中父元素的大小

Question

我正在尝试使用ResponsiveReactGridLayout 呈现仪表板，我在功能组件中的代码如下：

const Home = () => {
  const [coins, setCoins] = useState(latestCoins);
  const [coin, setCoin] = useState(curCoin);
  const canvasRef = useRef(null);

  useEffect(() => {
    getCoins().then((data) => setCoins(data));
  }, []);
  return (
    <ResponsiveReactGridLayout
      onResize={(e) => console.log(e)}
      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}>
        {console.log(canvasRef)}
        //Trying to use canvasRef.current.width and height but getting an error: Property 'width' does not exist on type 'never'
        <Candlestick coin={coin} width={600} height={400} />
      </div>
    </ResponsiveReactGridLayout>
  );
};

我的 Candlestick 组件确实从 react-stockcharts 返回了一个 ChartCanvas 对象，它需要一个宽度和高度（没有它它不会占用 div 的整个空间）

如何获取 div 的高度和宽度？

我尝试过使用 useRef() 钩子，但它似乎总是将 current 设为 null。

我能得到一些帮助吗？

Answer 1

“从不”类型上不存在属性“宽度”

这实际上是一个 TypeScript 错误。这意味着 TypeScript 不知道 .current 属性的类型应该是什么。因此它不知道.current 具有属性.width 和.height，它会阻止您访问它们。你需要告诉 TypeScript 这是一个 div 的引用。

HTMLDivElement没有实际上有 .width 和 .height，但您可以使用 .clientWidth 或 .offsetWidth 代替。

const canvasRef = useRef<HTMLDivElement>(null);

---

我尝试过使用 useRef() 钩子，但它似乎总是将 current 设置为 null。

ResponsiveReactGridLayout 组件正在为其子组件设置自己的引用，因此您的 ref={canvasRef} 会被覆盖。

解决此问题的最简单方法是添加另一层嵌套。 ResponsiveReactGridLayout 将在最外面的div 上设置一个引用，但您可以在其中添加另一个div，并使用您控制的引用。确保它填满整个高度。

请注意，.current 属性在第一次渲染时可能仍为 null。您可以按照@PushpikaWan 的建议使用默认值，也可以延迟渲染图表直到获得实际宽度。

<ResponsiveReactGridLayout /*...props...*/ >
    <div key="candlestick" className="box">
        <div ref={canvasRef} style={{ width: "100%", height: "100%" }}>
            {canvasRef.current ? (
                <Candlestick
                    data={data}
                    width={canvasRef.current.clientWidth}
                    height={canvasRef.current.offsetHeight}
                />
            ) : null}
        </div>
    </div>
    /*...other children...*/
</ResponsiveReactGridLayout>

---

我需要在网格布局上添加一个显式的width 才能使其正常工作。我不确定你是否已经在做这部分，但你可以使用WidthProvider 解释in the docs。

import { Responsive, WidthProvider } from 'react-grid-layout';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

CodeSandbox Demo

Answer 2

您可能会在初始加载时将其视为未定义，请在此处使用此可选语句

canvasRef?.current?.width

如果您有任何默认值，您也可以使用 空值合并 以及默认值

canvasRef?.current?.width?? default_value

那么它会像下面这样

 <Candlestick coin={coin} width={canvasRef?.current?.width?? default_width} height={canvasRef?.current?.height ?? default_Height} />