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

Question

I have a table component that has a fixed first column when scrolling horizontally. I do this by positioning it absolutely. This cause a problem.

When the window is resized, the contents of the table cells may wrap and cause the cells to resize also in height. I have set up a ref for the table component, so that I can fetch the row heights via javascript and resize the absolutely positioned fixed cells accordingly.

Here's the code:

  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>
  )
}

The code works, but it doesn't work on resize, it works only when the page is first loaded. If the window is narrow enough, the higher cell height is calculated correctly. The same of course when the window is wide and there is no text wrap in the cells.

When I resize the window, the row height don't get recalculated. I suppose this is because the tableRef is created at page load and it doesn't even if the page is resized.

I tried adding an event listener for resize event, but it doesn't help. getTallestCellHeights still uses the old ref for the calculation.

How can I update the tableRef so that getTallestCellHeights uses the correct heights for its calculations?

Answer 1

I think the issue here is the calculation of height. You are using clientHeight which excludes margin . As the page is being resized, the computed height is changing, and probably has some media queries that update the margin.

useRef is probably working as expected, but your calculation is not factoring in all values for the element height.

Consider the function in the snippet below:

  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);
    }

You will see the the actual heights vary.

 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>

Basic React Demo on codeandsandbox