React组件渲染外部链接时触发脚本错误求助

Portfolio组件代码（类版本） #

import React, { Component } from 'react';

export default class Portfolio extends Component {

  render() {
    let resumeData = this.props.resumeData;
    
    return (
      <section id="portfolio">
        <h3 className="portfolio-head">Checkout My Work</h3>
        <div className="portfolio-items">
          {resumeData.portfolio &&
            resumeData.portfolio.map((item) => (
              <div key={item.name} className="portfolio-item">
                <div className="item-wrap">
                  <img src={item.imgurl} alt={item.name} className="item-img" />
                  <div className="portfolio-item-overlay">
                    <div className="portfolio-item-details">
                      <h4 className='item-name'>{item.name}</h4>
                      <p>{item.description}</p>
                    </div>
                    <div className="portfolio-item-buttons">
                      {item.githubLink && (
                        <a href={item.githubLink} >
                          GitHub
                        </a>
                      )}
                      {item.projectLink && (
                        <a href={item.projectLink} >
                          Project
                        </a>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ))}
        </div>

      </section>
    );
  }
}

触发的脚本错误 #

Uncaught runtime errors:
ERROR
Script error.
    at handleError (http://localhost:3000/static/js/bundle.js:64898:58)
    at http://localhost:3000/static/js/bundle.js:64917:7

已完成的检查与尝试 #

• 排查应用路由配置及Node版本，未发现异常
• 将组件改写为函数式组件，问题依旧
• 为链接添加target="_blank" rel="noopener noreferrer"属性，偶发错误仍出现
• App组件代码如下：

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header resumeData={resumeData}/>
        <About resumeData={resumeData}/>
        <Resume resumeData={resumeData}/>
        <Portfolio resumeData={resumeData}/>
        <ContactUs resumeData={resumeData}/>
        <Footer resumeData={resumeData}/>
      </div>
    );
  }
}

排查建议 #

1. 定位具体错误代码行 #

当前错误指向压缩后的bundle.js，无法定位具体问题。可以：

• 在项目根目录创建.env文件，添加GENERATE_SOURCEMAP=true，重启开发服务器后，用Chrome DevTools的Sources面板查看错误对应的原始代码
• 关闭生产模式构建，确保开发环境下的错误提示未被压缩

2. 检查父元素事件冒泡冲突 #

链接所在的父容器（如.item-wrap、.portfolio-item-overlay）可能绑定了自定义点击事件，阻止了链接默认行为或触发异常。给链接添加事件阻止冒泡：

<a 
  href={item.githubLink} 
  target="_blank" 
  rel="noopener noreferrer"
  onClick={(e) => e.stopPropagation()}
>
  GitHub
</a>

3. 验证外部链接合法性 #

检查resumeData中的githubLink和projectLink是否为完整合法的URL（必须包含https://或http://），避免相对路径或格式错误。可以添加前置校验：

const isValidExternalUrl = (url) => {
  try {
    const urlObj = new URL(url);
    return urlObj.protocol === 'http:' || urlObj.protocol === 'https:';
  } catch {
    return false;
  }
};

// 渲染链接时
{item.githubLink && isValidExternalUrl(item.githubLink) && (
  <a href={item.githubLink} target="_blank" rel="noopener noreferrer">
    GitHub
  </a>
)}

4. 排查依赖与缓存问题 #

• 删除node_modules、package-lock.json（或yarn.lock），重新执行npm install（或yarn install），排除依赖损坏或版本冲突
• 清除浏览器缓存，重启开发服务器，避免缓存导致的偶发异常

5. 测试孤立场景 #

创建一个最小化测试页面，只渲染Portfolio组件和测试用的外部链接，排除其他组件（如Header、Footer）的事件监听或全局样式冲突。

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