我在使用 Javascript 方面經驗豐富，但對使用 React 還是很陌生。當純粹使用將在瀏覽器中呈現的 javascript 進行編碼時，我經常使用：
width = document.getElementById('element_id').clientWidth
將我的 svg 元素動態調整為不同的容器大小。React 中是否存在類似的東西？我一直在嘗試使用相同的技術，但正如預期的那樣，它不起作用，因為模板是在腳本運行后呈現的。
uj5u.com熱心網友回復：
使用可以使用它作業。使用效果（didUpdate）；。接受包含命令式的、可能有效的代碼的函式。
const App = () => {
useEffect(() => {
const width = document.getElementById('width').clientWidth;
console.log({ width });
}, []);
return(
<div id="width" />
);
}
uj5u.com熱心網友回復：
當然。使用“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>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410799.html
標籤：
上一篇：通過遞回c 檢查回文
下一篇：如何更改此SVG的顏色？