const data = ["1","2","3","4","5","6"] // example data
const unicode = • // This is the unicode that I want to put in the jsx
<div>
{
data.map((item)=>(
item + <span>unicode</span>
))
}
</div>
但不起作用,它显示[object对象]
我尝试了(•)
、{"•"}
、<span>•</span>
、<span>{"•"}</span>
但都没用。
你知道我如何在JSX中Map数组时使用它的unicode元素吗?
2条答案
按热度按时间hgb9j2n61#
尝试使用
8226
代码而不是•
。我从https://www.toptal.com/designers/htmlarrows/punctuation/bullet/获得此代码另外,您的JSX语法也不正确。
这是一个按预期工作的示例代码。
ugmeyewa2#
"Unicode"和 * 命名HTML字符实体 * 不是一回事。
•
是Unicode码点U+2022的命名字符实体。要在JavaScript中编写Unicode码点(例如,在稍后要使用的字符串中),可以使用Unicode代码单元转义(\u2022
)如果它适合一个单元(如果要手动编写代理项对,则为一对),或者为任何Unicode码位(\u{2022}
)指定Unicode码位**转义。另外,JSX片段不是 * 字符串 *,您不能用
+
将它们连接起来。要将一系列片段编写在一起,您可以将它们 Package 在<React.Fragment>___</React.Fragment>
中(更常见的缩写是:<>___</>
)。下面是一个将
unicode
设置为字符串的示例:x一个一个一个一个x一个一个二个x
下面是一个将
unicode
作为•
周围的片段的示例:注:上面的Stack Snippets使用React.Fragment的长格式,因为Stack Snippets中Babel的版本***太旧了***它不理解速记语法。SE Inc.多年来一直忽略的many problems with Stack Snippets之一。