如何在调整窗口大小时更新useRef挂钩的值

Question

我有一个表组件，它在水平滚动时有一个固定的第一列。我通过绝对定位来做到这一点。这导致了一个问题。

调整窗口大小时，表格单元格的内容可能会换行，并导致单元格的高度也会随之调整。我已经为表组件设置了一个ref，这样我就可以通过javascript获取行高度，并相应地调整绝对定位的固定单元格的大小。

这是代码：

const NewStatsTable = ({ headers, stats, data, dataType }) => {
const [cellHeights, setCellHeights] = useState([])
const tableRef = useRef(null)
useLayoutEffect(() => {
handleCellHeightResize()
window.addEventListener('resize', handleCellHeightResize)
return window.removeEventListener('resize', handleCellHeightResize)
}, [])
const headersToUse = getHeaders(dataType)
const getData = (item, header) => {
if (header === 'gameDate') return formatDate(item[headersToUse[header].id])
return item[headersToUse[header].id]
}
const getTallestCellHeights = () => {
const rows = Array.from(tableRef.current.getElementsByTagName('tr'))
return rows.map(row => {
const fixedCell = row.childNodes[0]
return Math.max(row.clientHeight, fixedCell.clientHeight)
})
}
const handleCellHeightResize = () => {
setCellHeights(getTallestCellHeights)
}
const headerMarkup = () => (
<TableRow header>{headers.map(renderHeaderRow)}</TableRow>
)
const renderHeaderRow = (header, colIndex) => {
const text = headersToUse[header].headerText
const height = cellHeights[0]
return (
<TCell
key={header}
type='th'
data={text}
colIndex={colIndex}
cellHeight={height}
/>
)
}
const cellMarkup = () =>
data.map((row, rowIndex) => (
<TableRow key={row._id}>
{headers.map((header, colIndex) =>
renderRow(header, row, rowIndex, colIndex)
)}
</TableRow>
))
const renderRow = (header, row, rowIndex, colIndex) => {
const text = getData(row, header)
const height = cellHeights[rowIndex + 1]
return (
<TCell
key={header}
type='td'
data={text}
colIndex={colIndex}
cellHeight={height}
/>
)
}
return (
<Container>
<ScrollContainer>
<Table ref={tableRef}>
<TableHead>{headerMarkup()}</TableHead>
<TableBody>{cellMarkup()}</TableBody>
</Table>
</ScrollContainer>
</Container>
)
}

该代码有效，但不适用于调整大小，只有在首次加载页面时才有效。如果窗口足够窄，则可以正确计算较高的单元格高度。当然，当窗口很宽并且单元格中没有文本换行符时也是如此。

调整窗口大小时，不会重新计算行高。我想这是因为tableRef是在页面加载时创建的，即使页面大小调整了，它也不会。

我尝试为resize事件添加一个事件侦听器，但没有帮助。CCD_ 3仍然使用旧的CCD_。

如何更新tableRef，以便getTallestCellHeights使用正确的高度进行计算？

Answer 1

我认为这里的问题是高度的计算。您使用的是clientHeight，不包括保证金。在调整页面大小时，计算出的高度会发生变化，并且可能有一些媒体查询会更新页边距。

useRef可能按预期工作，但您的计算没有考虑元素高度的所有值。

考虑以下代码段中的函数：

function calcHeight(el) {
const styles = window.getComputedStyle(el);
const margin =
parseFloat(styles["marginTop"]) + parseFloat(styles["marginBottom"]);
console.log(`trueHeight: ${Math.ceil(el.offsetHeight + margin)}`, `clientHeight: ${el.clientHeight}`);
return Math.ceil(el.offsetHeight + margin);
}

你会看到实际高度的变化。

function calcHeight(el) {
const styles = window.getComputedStyle(el);
const margin = parseFloat(styles["marginTop"]) + parseFloat(styles["marginBottom"]);
console.log(`trueHeight: ${Math.ceil(el.offsetHeight + margin)}`, `clientHeight: ${el.clientHeight}`);
return Math.ceil(el.offsetHeight + margin);
}
const demo = document.querySelector('.demo');
function onResize(e) {
calcHeight(demo);
}
window.addEventListener("resize", onResize);
onResize(demo);

.container {
display: flex;
justify-content: center;
align-items: center;
background: black;
width: 100vw;
height: 100vh;
}
.demo {
background: red;
padding: 25px;
margin: 25px;
border: 1px solid #fff;
}
@media (min-width: 500px) {
.demo {
margin: 50px;
background: green;
}
}

<div class="container">
<div class="demo">
<h1>Some Content</h1>
</div>
</div>

代码和机顶盒上的基本React演示