React中如何仅当data.js提供GitHub链接时显示项目卡片的GitHub按钮

实现方案 #

你可以直接使用React的条件渲染能力，结合JS的逻辑与运算符判断GitHub链接是否存在，仅当字段为有效值时渲染对应按钮，具体修改如下：

1. 修正Projects.js中卡片按钮区域的代码，替换原有GitHub按钮的固定渲染逻辑：

import { projects } from "../data";

export default function Projects() {
  return (
    <section id="projects" className="...">
      <div className="container ...">
        
        {/* 原有其余代码保留 */}

        {/* 项目卡片渲染区域 */}
        <div className="flex flex-wrap -m-4">
          {projects.map((project) => (
            {/* 注意：原有外层嵌套a标签不符合HTML规范，建议替换为div等普通容器，避免点击事件冲突 */}
            <div
              key={project.image}
              className="sm:w-1/2 w-full p-4">
              
              {/* 原有其余卡片代码保留 */}

              <div className="project-buttons ...">
                <a className="live-site ..." href={project.link} target="_blank" rel="noopener noreferrer"> 在线预览</a>
                {/* 仅当github字段存在非空值时渲染按钮 */}
                {project.github?.trim() && (
                  <a className="github ..." href={project.github} target="_blank" rel="noopener noreferrer">GitHub</a>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

逻辑说明 #

• JS中空字符串、null、undefined均属于假值，逻辑与&&运算符左侧为假时会直接返回假值，不会渲染右侧的按钮元素
• 加?.trim()是为了兼容github字段仅填了空格的无效场景，判断更严谨
• 新增的rel="noopener noreferrer"是浏览器安全规范要求，避免新打开的第三方页面存在权限窃取风险

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