React点击卡片跳转外部页面的实现方法求助

你的核心问题是用错了事件处理逻辑——handleClick返回<a>标签不会触发跳转，React事件函数不会自动渲染返回的JSX。而且用div绑定点击事件模拟链接既不语义化，也丢失了原生链接的功能，直接用原生<a>标签是最优解。

修复后的Card组件 #

直接用<a>标签包裹整个卡片内容，点击卡片任意区域都会触发跳转，同时保留右键新窗口打开、键盘Tab导航等原生特性：

import React from "react";

function Card(props) {
  return (
    <a 
      href={props.href} 
      target="_blank" 
      rel="noopener noreferrer" // 规避target="_blank"带来的安全风险
      className="link-container"
    >
      <div className="row">
        <div className="card">
          <hr className="divide" />
          <img className="img" src={props.img} alt={`${props.name} icon`} />
          <h4 className="name">{props.name}</h4>
        </div>
      </div>
    </a>
  );
}

export default Card;

特殊场景：用div绑定点击跳转 #

如果因样式或其他限制必须用div触发点击，可在事件函数里直接操作浏览器跳转，但需手动补充无障碍支持：

import React from "react";

function Card(props) {
  const handleClick = () => {
    // 新窗口打开外部链接
    window.open(props.href, "_blank", "noopener noreferrer");
    // 当前窗口跳转：window.location.href = props.href;
  };

  return (
    <div 
      className="link-container" 
      onClick={handleClick} 
      tabIndex="0" 
      role="link"
      onKeyPress={(e) => e.key === 'Enter' && handleClick()}
    >
      <div className="row">
        <div className="card">
          <hr className="divide" />
          <img className="img" src={props.img} alt={`${props.name} icon`} />
          <h4 className="name">{props.name}</h4>
        </div>
      </div>
    </div>
  );
}

export default Card;

这种方式需要手动添加tabIndex、role和键盘事件支持，远不如原生<a>标签省心。

批量渲染卡片组件 #

在父组件中导入links数据，循环生成卡片：

import Card from "./Card";
import links from "./links";

function App() {
  return (
    <div className="card-group">
      {links.map(link => (
        <Card 
          key={link.id} 
          name={link.name} 
          img={link.img} 
          href={link.href} 
        />
      ))}
    </div>
  );
}

export default App;

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