react获取div的宽高,如果div中与span折行了

如果 div 中的内容折行了，获取 div 的宽高就需要考虑到内容的实际尺寸。可以使用 `getBoundingClientRect()` 方法获取元素的尺寸和位置信息。

具体的实现方式如下：

const div = document.getElementById('mydiv');
const rect = div.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
console.log(`div 的宽度为：${width}px，高度为：${height}px`);

如果 div 中的内容不是固定的，而是动态生成的，那么可以在内容生成后使用 `window.getComputedStyle()` 方法获取元素的样式信息，然后计算出实际的尺寸。

const div = document.getElementById('mydiv');
const span = document.createElement('span');
span.innerText = '这是一段很长的文字，可能会折行';
div.appendChild(span);
const style = window.getComputedStyle(div);
const width = div.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
const height = div.offsetHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
console.log(`div 的宽度为：${width}px，高度为：${height}px`);

这里需要注意，我们需要减去元素的 padding 值才能得到实际的尺寸。