你能渲染一下“|就像我在注解中写的那样，在JSX Object上使用join将其强制为String，这将导致[object Object]。

{tags.map((tag, i) => (
    <a href={tag.tagLink} alt="">
        {tag.tagName} {i < tags.length - 1 ? "|" : ""}
    </a>
))}

你正在尝试使用一个元素数组的“join”元素。它会在内部将元素类型转换为一个字符串，对于任何对象，该字符串都是[object Object]。因此，你将得到[object Object]|[object Object]|[object Object]
类似这样的方法会起作用：

{tags.map((tag, i) => {
    return <span>
       <a href={tag.tagLink} alt="">
          {tag.tagName}
       </a> {i < tags.length - 1 ? "|" : null}
    </span>           
})}

你可以Map数组来创建HTML标签。分隔符可以用一个基本的CSS类来添加。

const tags = [
  {
    tagName: "tag1",
    tagLink: "#first"
  },
  {
    tagName: "tag2",
    tagLink: "#second"
  },
  {
    tagName: "tag3",
    tagLink: "#third"
  }
];

const links = tags.map( tag => `<a href="${tag.tagLink}" id="${tag.tagName}">${tag.tagLink}</a>` );

document.querySelector( 'body' ).innerHTML = links.join( '' );

a + a {
  border-left: 1px solid black;
}

我想你可以像其他人建议的那样渲染链接

const tags = [
  {
    tagName: "tag1",
    tagLink: "#first"
  },
  {
    tagName: "tag2",
    tagLink: "#second"
  },
  {
    tagName: "tag3",
    tagLink: "#third"
  }
];

const links = tags.map( tag => `<a href="${tag.tagLink}" class="divider" id="${tag.tagName}">${tag.tagLink}</a>` );

document.querySelector( 'body' ).innerHTML = links.join( '' );

并将分隔符留给CSS，您可以将这样的类分配给您的链接列表：

.divider{
 border-right: 1px solid black;
 padding-left: 10px;
 padding-right: 10px;
}

https://jsfiddle.net/xt09rpwm/

对于这个问题，我个人最喜欢的解决方案是使用flatMap

{tags.flatMap((tag, i) => [
  i > 0 && <span key={`divider-${i}}>|</span>,
  <a href={tag.tagLink} alt="" key={tag.tagName}>{tag.tagName}</a>,
])}

您可以在一个函数调用中完成所有操作，为每个要呈现的元素添加键，并以您想要的任何方式设置分隔符的样式。（在本例中，我使用了span，但您可以使用任何适合该场景的样式）