三元运算符布尔逻辑失效：非最后项目未添加分隔符|

你的代码逻辑完全写反了：当前三元表达式lastOne ? project + " | " : project是给最后一个项目添加分隔符，而你的需求是给除最后一个外的所有项目加分隔符，这就是分隔符不显示的核心原因。

直接修复现有逻辑 #

修改ProjectLinks组件的三元判断条件，把逻辑反转即可：

function ProjectLinks({ link, project, lastOne }) {
  return (
    <a href={link} target="_blank" style={{ color: "white" }}>
      {lastOne ? project : project + " | "}
    </a>
  );
}

更优方案：自动判断最后一项（无需手动维护lastOne字段） #

手动给每个对象添加lastOne字段不够灵活，后续新增/删除项目时还要同步修改该字段，推荐通过数组索引自动判断是否为最后一项：

1. 先移除数组中所有的lastOne字段：

const projects = [
  {
    project: "Kuma",
    link: "",
    image: "./kuma.png",
  },
  {
    project: "Rin Starseed",
    link: "",
    image: "./star.png",
  },
  {
    project: "Sea Harvest",
    link: "",
    image: "./fish.png",
  },
];

2. 修改渲染逻辑（假设你用map遍历渲染）：

{projects.map((item, index) => (
  <span key={index}>
    <a href={item.link} target="_blank" style={{ color: "white" }}>
      {item.project}
    </a>
    {/* 给非最后一项添加分隔符，且分隔符不在链接内，避免误点击跳转 */}
    {index !== projects.length - 1 && " | "}
  </span>
))}

这种方式既满足需求，又省去了手动维护lastOne的麻烦，同时优化了用户体验。

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