Javascript 如何使用map函数添加分隔符

我有一个常数

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

我想使用map函数来渲染锚定标记，并且我想在锚定标记之间使用一个分隔符

我试过使用join，但是没有用

请检查一下电话号码

使用join映射
{标签
.map（（标记，i）=>(
))
.join（“|”）}

---

生成：

[object object]|[object object]|[object object]

您只需映射数组即可创建HTML标记。 分隔符可以添加一个基本的CSS类

const标记=[
{
标记名：“tag1”，
标记链接：“第一”
},
{
标记名：“tag2”，
标签链接：“第二”
},
{
标记名：“tag3”，
标签链接：“第三”
}
];
const links=tags.map（tag=>``）；
document.querySelector（'body'）.innerHTML=links.join（''）
a+a{
左边框：1px纯黑；
}
您能在地图功能中渲染“|”吗？
就像我在评论中写的那样，在JSX对象上使用join将其强制为字符串，结果是[Object]

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

{tags.map（（tag，i）=>(
{tag.tagName}{i
您试图使用元素数组中的“连接”元素。它将在内部将元素类型转换为字符串，对于任何对象，该字符串将作为[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>           
})}

{tags.map（（tag，i）=>{
返回
{i
我认为您可以像其他人建议的那样呈现链接

    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( '' );

请在问题中添加您的小提琴中的代码。您可以使用代码段功能使其在此处工作。“我尝试使用join”。。。那就让我们看看问题。我们不应该仅仅为了审查您的初始问题而离开现场。问题应该是独立的。非现场演示很棒，但只是为了支持问题本身中实际存在的内容，而不是重点。。。。。你试过的不起作用的东西应该在问题中。花几分钟阅读@charlietfl我已经提到了我为解决问题而尝试的三种方法。如果你能打开它一次，它就在小提琴链接中。请停止烘焙感谢您的帮助，但您的分隔符在锚标签内。够近了。我在寻找@amulous回答的东西below@Rickie-如果有帮助，请将其标记为解决方案！
    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( '' );

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