React组件条件式添加内联样式报错问题排查

内联style语法问题 #

你写的style表达式存在隐患：

<div className="items" ref={containerRef} style={max_width !== '0px' && { maxWidth: max_width }}>

当max_width等于'0px'时，整个表达式返回false，但React的style属性仅接受对象或undefined，传入布尔值会触发渲染异常，这可能是引发后续ref错误的导火索。

正确写法用三元表达式兜底，确保返回合法值：

// 条件成立时传样式对象，否则传undefined（React会自动忽略空样式）
<div className="items" ref={containerRef} style={max_width !== '0px' ? { maxWidth: max_width } : undefined}>

// 也可以传空对象，效果一致
<div className="items" ref={containerRef} style={max_width !== '0px' ? { maxWidth: max_width } : {}}>

"n.current is null" 错误本质 #

这个错误和style的问题相关，但核心是你在ref还未挂载到DOM上，或者组件已卸载后，直接访问了containerRef.current。style的非法值触发了组件异常重渲染，把原本隐藏的ref访问时机问题暴露了出来。

排查方向：

• 检查useEffect中的代码，是否未添加正确依赖，导致组件未挂载就执行了访问ref的逻辑；
• 检查事件处理函数，是否在组件卸载后仍尝试调用ref相关操作；
• 确认containerRef是用useRef(null)正确初始化的：

const containerRef = useRef(null);

两步修复 #

1. 先修正style的写法，消除渲染异常；
2. 所有访问containerRef.current的地方，先做非空判断：

if (containerRef.current) {
  // 这里编写操作DOM的逻辑
}

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