React中为数组型JSX.Element添加可点击元素及修复外链问题

你的代码里有几个关键问题导致外部链接无法正常工作：

• a标签未正确绑定目标链接且无点击区域：你写的<a href="https://www.w3docs.com/"></a>是固定无效链接，既没用到数据里的movie.href，标签又为空，根本点不到。
• href缺少协议头：id为1的电影数据里href是www.wikipedia.com，浏览器会把它当成当前网站的相对路径，必须加上https://才能正确跳转到外部网站。
• React语法错误：React里必须用className代替原生HTML的class，你代码里的class="container"、class="link"都是错误写法；还有classNAme="movie-card-href"是拼写错误，应该是className。

下面是修正后的完整代码：

const Movies: React.FC = () => {  
  const getMovies = (): JSX.Element[] => {
    return [{
      desc: "一群人守护银河系的故事。",
      id: 1,
      icon: "fa-solid fa-galaxy",
      href: "https://www.wikipedia.com", // 补全HTTPS协议
      image: "https://images.unsplash.com/photo-1596727147705-61a532a659bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFydmVsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      title: "银河守护者"
    }, {
      desc: "一群人离开洞穴搞事情的故事。",
      id: 2,
      icon: "fa-solid fa-hat-wizard",
      image: "https://images.unsplash.com/photo-1535666669445-e8c15cd2e7d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bG9yZCUyMG9mJTIwdGhlJTIwcmluZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
      title: "洞穴来客"
    }, {
      desc: "一个脑袋有坑的男孩试图阻止一个总输的坏人。",
      id: 3,
      icon: "fa-solid fa-broom-ball",
      image: "https://images.unsplash.com/photo-1632266484284-a11d9e3a460a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGhhcnJ5JTIwcG90dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      title: "头发锅"
    }, {
      desc: "一群人为了抢地盘大打出手的冗长故事，谁叫太空不够用呢。",
      id: 4,
      icon: "fa-solid fa-starship-freighter",
      image: "https://images.unsplash.com/photo-1533613220915-609f661a6fe1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3RhciUyMHdhcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
      title: "地盘之争"
    }].map((movie: any) => {
      const styles: React.CSSProperties = {
        backgroundImage: `url(${movie.image})`  
      }
      
      const id: string = `movie-card-${movie.id}`;
      
      // 若要整个卡片可点击，直接用a标签包裹整个card内容即可
      return (
        <div key={movie.id} id={id} className="movie-card">
          <div className="container movie-card-background background-image" style={styles} />
          <div className="movie-card-content">
            <div className="movie-card-info">
              <span className="movie-card-title">{movie.title}</span>
              <span className="movie-card-desc">{movie.desc}</span>
              {/* 仅当存在href时渲染链接，避免空链接 */}
              {movie.href && (
                <a 
                  href={movie.href} 
                  className="movie-card-href"
                  target="_blank" // 可选：在新标签页打开链接
                  rel="noopener noreferrer" // 安全属性，防止恶意跳转
                >
                  查看详情
                </a>
              )}
            </div>
            <i className={movie.icon} />
          </div>
        </div>
      );
    })
  }

  // 组件必须返回JSX，别忘了渲染电影列表
  return <div className="movies-container">{getMovies()}</div>;
}

额外提示：

• 如果需要让整个电影卡片都能点击，直接把<a>标签包裹住整个<div className="movie-card">的内容即可。
• target="_blank"配合rel="noopener noreferrer"是React中打开外部链接的安全最佳实践，能避免潜在的安全风险。

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