React使用@sentisso日历组件隐藏时触发removeEventListener空指针错误

问题原因 #

该组件被条件渲染卸载时，内部尝试对已销毁的DOM元素执行removeEventListener操作，因此抛出TypeError: Cannot read properties of null (reading 'removeEventListener')错误。

解决方案 #

不要直接通过条件渲染卸载组件，改用CSS控制组件的显示与隐藏，让组件始终保留在DOM中：

1. 替换条件渲染逻辑
   将原来的{show && <Calendar ... />}改为用容器包裹，通过display属性控制显示状态：

<div style={{ display: show ? "block" : "none" }}>
  <Calendar
    value={selectedRange}
    onChange={handleChange}
    shouldHighlightWeekends
    colorPrimary="#1a73e8"
  />
</div>

2. 保留原有按钮切换逻辑
   按钮点击依然负责切换show状态，只是组件不再被卸载，仅通过CSS隐藏，避免了组件卸载时的DOM引用错误。

原理说明 #

用CSS隐藏组件时，组件实例并未被销毁，内部的事件监听清理逻辑能正常执行；而条件渲染直接移除组件时，组件内部可能还持有已不存在的DOM引用，导致清理操作报错。

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