Question

我有一个const

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

我想使用map函数来呈现锚标记，并且我希望在锚标记之间使用分隔符|。

我尝试使用连接，但是它不起作用。

请检查fiddle

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 Object上使用join将其强制为String，从而得到[object Object]。

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

Answer 2

您正在尝试使用元素数组中的“ 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>           
})}

Answer 3

您只需映射数组即可创建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;
}

Answer 4

我认为您可以像其他建议的那样呈现链接

    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/

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

4 个答案: