如何使用地图功能添加分隔符

Question

我有一个常量

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

我想使用 map 函数来呈现锚标签，并且我想要|在锚标签之间有一个分隔符。

我尝试使用 join 但它不起作用。

请检查小提琴

map using join
        <div style={style}>
          {tags
            .map((tag, i) => (
              <a href={tag.tagLink} alt="">
                {tag.tagName}
              </a>
            ))
            .join("|")}
        </div>

产生： [object Object]|[object Object]|[object Object]

Answer 1

你能渲染“|”吗 在地图功能？就像我在评论中写的那样，在 JSX 对象上使用 join 将其强制为 String，从而产生 [object Object]。

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

Answer 2

您正在尝试使用元素数组的“连接”元素。它将在内部将元素类型转换为字符串，对于任何对象来说，该字符串都是 [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>           
})}