呈现HTML符号
呈现HTML符号
提问于 2020-11-13 17:16:08
我在React中创建了一个Symbol组件，以便按名称轻松呈现HTML Symbols，如euro will render €(欧元)或sum render ∑(∑)。
问题是，如果我只呈现HTML代码，我将在屏幕上看到代码，而不是符号。所以我不得不在span元素上使用HTML来将其呈现为dangerouslySetInnerHTML：
const SYMBOLS = {
euro: '€',
sum: '∑'
}
const Symbol = (props) => {
const { entity } = props
return <span dangerouslySetInnerHTML={{ __html: SYMBOLS[entity] }} />
}
export default Symbol这可以很好地工作，但是用一个“不必要的”span包装符号感觉并不正确。那么，有没有人知道如何在不使用额外包装器的情况下在React中呈现HTML符号？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-11-13 17:22:35
dangerouslySetInnerHTML是React中处理原始超文本标记语言的标准方法。
应该避免这样做，但这样做的方法是避免使用原始HTML。
键入€或使用JavaScript转义序列："\u20AC"
const SYMBOLS = {
euro: "\u20AC",
sum: '∑'
}像File Format Info这样的站点可以很好地识别正确的转义序列，或者获取可以复制/粘贴的字符。
Stack Overflow用户
发布于 2020-11-13 17:27:42
可以在JSX中显示符号，但在未正确解析的代码中显示符号。你应该使用ReactHtmlParser包来解析你的SYMBOLentity，尝试安装这个包。
npm install "react-html-parser" --save这是您的符号组件的完整代码
import React from 'react';
import ReactHtmlParser from "react-html-parser";
const SYMBOLS = {
euro: '€',
sum: '∑'
}
const Symbol = (props) => {
const { entity } = props;
return (
{ReactHtmlParser(SYMBOLS[entity])}
);
}
export default Symbol;并使用符号码
<Symbol entity="euro" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64818262
复制相关文章
相似问题
腾讯云开发者
