React中document.getElementById设置display:none未生效问题

• 代码执行时机不对：你调用document.getElementById('pwMeter')的时候，目标div还没被React挂载到真实DOM树，此时方法返回值为null。对null值设置style属性属于静默失败，不会在控制台抛出显眼的红色报错，后续的样式修改逻辑根本没落到真实元素上，自然看不到隐藏效果。
• 手动修改的样式被React重渲染覆盖：就算你在元素挂载后拿到了DOM节点改了样式，只要组件触发状态更新引发重渲染，React会根据虚拟DOM的比对结果，把真实DOM的属性重置为JSX中定义的初始值，你手动加的display: none会被直接覆盖，不会持久生效。
• 额外排查点：可以先在if逻辑里加一句console.log(document.getElementById('pwMeter'))，确认是否能拿到目标元素，同时检查id拼写是否一致、if判断条件pw.length == 0是否真的被触发。

React不推荐、但不完全禁止直接操作真实DOM。

• 常规业务场景下绝对不要用原生DOM API修改页面元素，React本身是声明式框架，所有UI变化都应该通过修改状态、让React自动更新DOM完成，直接手动操作DOM很容易和React自身的渲染流程冲突，出现样式不生效、状态和UI不同步的问题。
• 只有极少数必须操作真实DOM的特殊场景（比如手动触发输入框聚焦、获取元素实际宽高、接入没有React适配的第三方DOM类库），才可以通过React提供的useRef/createRefAPI拿到真实DOM节点后操作，操作时也要注意不要修改React负责管控的元素属性，避免被重渲染覆盖。

你这个隐藏元素的需求完全不需要手动操作DOM，用React声明式写法就能稳定实现，示例代码如下：

import { useState } from 'react'

export default function PasswordInput() {
  const [pw, setPw] = useState('')

  return (
    <div>
      <input 
        type="password" 
        value={pw} 
        onChange={e => setPw(e.target.value)} 
        placeholder="请输入密码"
      />
      {/* 方式1：保留DOM节点，通过行内样式控制显示隐藏 */}
      <div 
        id="pwMeter" 
        style={{ display: pw.length === 0 ? 'none' : 'block' }}
      >
        密码强度检测
      </div>

      {/* 方式2：密码为空时直接不渲染该节点，性能更好
      {pw.length > 0 && <div id="pwMeter">密码强度检测</div>}
      */}
    </div>
  )
}

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