React虚拟滚动表格重构：动态修改行高的最佳方案咨询

内联样式的实际效果 #

你现在用的内联样式写法style={{ height: ${scroll.firstRowHeight}px }}完全没问题，React官方没禁止这种方式，反而在处理动态变化的样式值时，这种方式直接把样式和组件状态绑定，状态一更新样式自动跟着变，不用额外写DOM操作的代码，实现成本很低。

但它的缺点也很明显：

• 样式散在JSX里，要是表格结构复杂、多处有动态行高，后期维护找起来太麻烦，没法统一管理；
• 内联样式优先级最高，会盖掉CSS类里的height设置，要是之后想通过CSS调行高，很容易出冲突。

useRef/直接操作DOM的适用情况 #

如果你的场景符合下面这些，再考虑用useRef拿元素改样式：

• 要批量改多个元素的样式，或者样式逻辑复杂（比如结合滚动位置做精细计算），用ref能把样式逻辑集中到一块，不用在JSX里堆一堆内联代码；
• 已经有成熟的CSS类管行高，只是临时要覆盖动态值，用ref改DOM样式不会打乱现有的样式体系。

但要注意React的渲染规则：你用ref改了DOM样式后，要是组件重新渲染，内联样式会把你改的值覆盖掉，所以要么保证状态和DOM样式同步，要么在useEffect里监听状态变化去更新DOM样式。别直接用document.querySelector，React里用useRef才是符合组件化思路的，不会因为组件卸载、重渲染出意外。

更省心的折中方案 #

要是想兼顾动态性和可维护性，试试这俩办法：

• CSS变量：在表格容器上定义--first-row-height变量，CSS类里用height: var(--first-row-height)，然后通过内联样式或者ref改容器的CSS变量值。这样样式逻辑都在CSS里，动态值靠变量传，既不用写一堆内联样式，更新也灵活。
  示例代码：

  <div style={{ '--first-row-height': `${scroll.firstRowHeight}px` }} className="table-wrap">
    <tr className="first-row"></tr>
  </div>
  

  CSS：

  .first-row {
    height: var(--first-row-height);
  }
  

• 条件类名：如果行高只有几种固定值（比如正常高和展开高），直接定义不同的CSS类（比如.row-short、.row-tall），根据状态动态切换类名就行，这样样式全在CSS里，管理起来超方便。

总结一下 #

• 简单动态行高场景，内联样式足够用，写起来快；
• 复杂场景或要统一管样式的，优先选CSS变量或条件类名，实在要用DOM操作就用useRef（记得同步状态）；
• 别用document.querySelector，React组件里用useRef才是正道。

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