我有一个常数
const tags = [
{
tagName: "tag1",
tagLink: "#"
},
{
tagName: "tag2",
tagLink: "#"
},
{
tagName: "tag3",
tagLink: "#"
}
];
我想使用Map功能来呈现锚标记,我也希望在锚标记之间的分隔符|
。
我试过使用join,但它不起作用。
请检查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]
5条答案
按热度按时间lstz6jyr1#
你能渲染一下“|就像我在注解中写的那样,在JSX Object上使用join将其强制为String,这将导致[object Object]。
cngwdvgl2#
你正在尝试使用一个元素数组的“join”元素。它会在内部将元素类型转换为一个字符串,对于任何对象,该字符串都是[object Object]。因此,你将得到
[object Object]|[object Object]|[object Object]
类似这样的方法会起作用:
flmtquvp3#
你可以Map数组来创建HTML标签。分隔符可以用一个基本的CSS类来添加。
92vpleto4#
我想你可以像其他人建议的那样渲染链接
并将分隔符留给CSS,您可以将这样的类分配给您的链接列表:
https://jsfiddle.net/xt09rpwm/
zour9fqk5#
对于这个问题,我个人最喜欢的解决方案是使用flatMap
您可以在一个函数调用中完成所有操作,为每个要呈现的元素添加键,并以您想要的任何方式设置分隔符的样式。(在本例中,我使用了span,但您可以使用任何适合该场景的样式)