如何使用JavaScript动态操作组件结构并获取内部DOM元素高度

核心结论 #

• 你无法在组件完成渲染前访问到SectionBox内部的div元素，也拿不到它的真实高度，你遍历componentObject时只能到自定义组件层级、看不到内部结构是正常现象。
• JSX本质是UI结构的描述对象，你写的<SectionBox />在未执行渲染逻辑时，只是一个指向组件函数的引用，组件内部返回的DOM结构既没有生成虚拟节点，更没有挂载为真实DOM，自然不存在props.children，也没有可读取的高度属性。
• DOM元素的高度是浏览器完成布局计算后才会生成的属性，必须等组件挂载到页面、CSS规则生效后才能拿到准确值，没有办法在渲染前提前获取。

正确获取内部DOM高度的实现方式 #

标准方案：Ref转发 #

React提供了ref转发能力，可以直接把内部DOM的引用透传给父组件，是官方推荐的获取自定义组件内部DOM的方式：
首先修改SectionBox组件，支持接收外部传入的ref：

import React, { forwardRef } from 'react'

const SectionBox = forwardRef((props, ref) => {
  return <div ref={ref}>
    content here
  </div>
})
export default SectionBox

在父组件中创建ref，等组件挂载完成后即可读取DOM高度：

import { useRef, useEffect } from 'react'

function MagazinePage() {
  const sectionNodeRef = useRef(null)

  useEffect(() => {
    // 仅在组件首次挂载完成、DOM布局计算结束后执行
    if (sectionNodeRef.current) {
      const sectionHeight = sectionNodeRef.current.offsetHeight
      // 在这里执行你的高度适配、分页逻辑
      console.log('SectionBox内部div高度：', sectionHeight)
    }
  }, [])

  return (
    <Box>
      <SectionBox ref={sectionNodeRef} />
    </Box>
  )
}

如果你没有权限修改SectionBox的源码，可以直接在SectionBox外层包一层块级容器元素，给容器绑定ref读取高度——默认情况下块级容器高度会被子元素完全撑开，读取到的容器高度和内部div的实际高度一致，能满足绝大多数场景的需求。

注意事项 #

不要在组件渲染函数的执行阶段、或者组件未挂载时读取DOM尺寸，这时候DOM节点还未生成或者还没完成布局计算，拿到的结果要么是null，要么是不准确的错误值。所有DOM尺寸读取、DOM操作的逻辑，都要放在useEffect（函数组件）或者componentDidMount/componentDidUpdate（类组件）生命周期中执行。

杂志式自适应布局的优化建议 #

针对你需要按页面容器高度适配内容的场景，不推荐纯靠JS硬算高度切分内容，有两个更稳妥的实现思路：

• 优先用CSS原生多列布局实现自动分页：给页面容器设置固定高度，搭配column-width、column-gap属性，浏览器会自动把溢出的内容分流到下一页，不需要手动计算高度拆分内容，性能更好，也能避免JS计算误差导致的内容错位。如果需要控制分页断点，可以给标题、图片等不可拆分的元素加break-inside: avoid属性，避免内容被截断到两页中间。
• 如果需要更复杂的分页逻辑（比如动态加载内容、自定义分页规则），可以用ResizeObserver监听每个内容块和页面容器的尺寸变化，实时计算当前页剩余可容纳高度，动态决定内容块放在当前页还是新开一页，相比只在首次挂载时读一次高度的方案，能更好适配窗口缩放、字体大小调整、内容动态更新的场景。
• 不要尝试在渲染前、或者服务端预计算内容高度：不同设备的字体渲染、默认样式、视口尺寸都存在差异，预计算的高度一定会有误差，所有尺寸计算都要放到客户端实际渲染完成后再执行。

内容的提问来源于stack exchange，提问作者Flezcano