React 中的 clientWidth 函数

Question

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

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

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

之后呈现的

Answer 1

当然可以。使用“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 2

用这个就可以用了。使用效果（didUpdate）；。接受包含必要的、可能有效的代码的函数。

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

React 中的 clientWidth 函数

clientWidth function in React

javascript

svg

dynamic

width

reactjs