React 中的 clientWidth 函数

Question

我在使用 Javascript 方面经验丰富，但对使用 React 还是个新手。当纯粹用 javascript 编码并在浏览器中呈现时，我经常使用：

width = document.getElementById('element_id').clientWidth

将我的 svg 元素动态调整为不同的容器大小。 React 中有这样的东西吗？我一直在尝试使用相同的技术，但正如预期的那样，它不起作用，因为模板是在脚本运行后呈现的。

Answer 1

使用可以使用它。 使用效果（didUpdate）；。接受一个包含命令式的、可能有效的代码的函数。

const App = () => {
    useEffect(() => {
        const width = document.getElementById('width').clientWidth;
        console.log({ width });
    }, []);
    
   return(
            <div id="width" />
   );
}

Answer 2

当然。使用“createRef”钩子很容易做到。 基本上，document.getElementById 搜索 DOM 元素并使用 createRef 分配对（虚拟）DOM 元素的引用，您可以对其进行所有操作。

在这里查看它是如何完成的：

import React, { createRef } from 'react';

export const FooComponent = () => {
  const fooRef = createRef<HTMLDivElement>();

  const handleClick = () => {
    const divClientWidth = fooRef.current?.clientWidth;
    window.alert(divClientWidth);
  };

  return (
    <div ref={fooRef}>
      <button onClick={handleClick}>Show client width</button>
    </div>
  );
};

Answer 3

可以通过clientWidth 或getBoundingClientRect().width 获取元素的大小。在某些情况下，我不太确定为什么 clientWidth 不起作用，但 getBoundingClientRect 起作用了。所以我按顺序得到元素的宽度。

我添加了一个 setTimeout，因为在渲染期间，元素可能会根据布局进行调整，因此请务必注意其大小可能会根据其 CSS（或滚动条的显示）而变化。

反应 18.2.0

例子：

import { useEffect, useRef } from "react"
import "./Component.scss"

function Component() {
    const elementRef = useRef(null)

    useEffect(() => {
        const element = elementRef.current
        let width = element.clientWidth || element.getBoundingClientRect().width
        console.log(width)

        setTimeout(() => {
            width = element.clientWidth || element.getBoundingClientRect().width
            console.log(width)
        }, 1000)
    }, [])

    return (
        <div id="component">
            <div className="element" ref={elementRef}>element</div>
        </div>
    )
}

导出默认组件