React产品卡片预览弹窗报错：Uncaught TypeError读取null的querySelectorAll

核心问题 #

刷新页面时，你的原生JS脚本在React组件完成DOM渲染之前就执行了，此时目标DOM元素还未挂载到页面中，document.querySelector返回null，调用querySelectorAll自然会抛出类型错误。首次运行正常是因为组件已经渲染完成后脚本才执行，但刷新时脚本执行时机早于React的渲染周期。

解决方案 #

方案1：将原生JS逻辑迁移到React钩子中 #

React是声明式框架，尽量避免直接操作DOM，建议用React的状态和钩子实现预览弹窗逻辑：

• 使用useState管理弹窗的显示/隐藏状态
• 使用useRef获取产品卡片的DOM元素，确保在组件挂载后再访问
• 示例代码片段：

import { useState, useRef, useEffect } from 'react';

const ProductCard = () => {
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
  const cardRef = useRef(null);

  useEffect(() => {
    // 组件挂载后绑定事件
    const card = cardRef.current;
    if (card) {
      const previewBtn = card.querySelector('.preview-btn');
      previewBtn?.addEventListener('click', () => setIsPreviewOpen(true));
    }

    // 组件卸载时清理事件
    return () => {
      const card = cardRef.current;
      if (card) {
        const previewBtn = card.querySelector('.preview-btn');
        previewBtn?.removeEventListener('click', () => setIsPreviewOpen(true));
      }
    };
  }, []);

  return (
    <div ref={cardRef} className="product-card">
      {/* 产品内容 */}
      <button className="preview-btn">快速预览</button>
      {isPreviewOpen && (
        <div className="preview-modal">
          {/* 弹窗内容 */}
          <button onClick={() => setIsPreviewOpen(false)}>关闭</button>
        </div>
      )}
    </div>
  );
};

方案2：确保原生JS在React渲染完成后执行 #

如果必须保留原生JS脚本，需将其改为可调用的函数形式，在React组件挂载后执行：

• 原生JS脚本修改：

export function initPreviewModals() {
  const productCards = document.querySelectorAll('.product-card');
  if (!productCards.length) return;

  productCards.forEach(card => {
    const previewBtn = card.querySelector('.preview-btn');
    const modal = card.querySelector('.preview-modal');
    previewBtn?.addEventListener('click', () => modal.classList.add('open'));
    modal?.querySelector('.close-btn')?.addEventListener('click', () => modal.classList.remove('open'));
  });
}

• React组件中引入调用：

import { useEffect } from 'react';
import { initPreviewModals } from './your-script-file.js';

const ProductList = () => {
  useEffect(() => {
    initPreviewModals();
    // 若产品列表是动态加载的，将动态数据加入依赖数组，更新时重新执行
  }, []);

  return (
    <div className="product-list">
      {/* 渲染产品卡片 */}
    </div>
  );
};

方案3：DOMContentLoaded事件兜底（不推荐） #

如果脚本是在HTML中直接引入的，可包裹在DOMContentLoaded事件中，但无法适配React动态渲染的场景（比如路由切换后新生成的卡片）：

document.addEventListener('DOMContentLoaded', () => {
  // 原有的原生JS逻辑
  const productCards = document.querySelectorAll('.product-card');
  // ...后续操作
});

关键注意点 #

• React中优先使用框架自身的状态和钩子管理UI，避免直接操作DOM，减少生命周期冲突
• 若必须操作DOM，一定要确保操作时机在组件挂载完成后，动态内容还要在更新后重新执行逻辑

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