reactjs - className 在危险的SetInnerHTML 上不起作用
问题描述
我最初 string
是这样的:-
My first name is @John# and last name is %Smith#.
我将在哪里替换:-
@
和<span className="contentDescHighlighted">
%
和<span className="contentDescHighlighted content_bold">
#
和</span>
工作代码如下: -
const handleAddingHighlight = (data) => {
let changeAT = data.replaceAll(`@`, `<span className="contentDescHighlighted">`)
let changePercentage = changeAT.replaceAll(`%`, `<span className="contentDescHighlighted content_bold">`)
let highlightedData = changePercentage.replaceAll(`#`, `</span>`); console.log(highlightedData)
return highlightedData
}
更改后string
,我将使用如下方式注入它们:-dangerouslySetInnerHTML
<p
className="contentDesc"
dangerouslySetInnerHTML={{__html: handleAddingHighlight(`My first name is @John# and last name is %Smith#.`)}}
></p>
不幸的是,应用的样式/类名根本没有任何效果,如下所示:-
// what it should looks like
<p className="contentDesc">
My first name is <span className="contentDescHighlighted">John</span> and last name is <span className="contentDescHighlighted content_bold">Smith</span>.
</p>
// current outcome when using dangerouslySetInnerHTML
<p
className="contentDesc"
dangerouslySetInnerHTML={{__html: handleAddingHighlight(`My first name is @John# and last name is %Smith#.`)}}
></p>
完整的组件将如下所示
export default function Test() {
const handleAddingHighlight = (data) => {
let changeAT = data.replaceAll(`@`, `<span className="contentDescHighlighted">`)
let changePercentage = changeAT.replaceAll(`%`, `<span className="contentDescHighlighted content_bold">`)
let highlightedData = changePercentage.replaceAll(`#`, `</span>`); console.log(highlightedData)
return highlightedData
}
return (
<>
{/* what it should looks like */}
<p className="contentDesc">
My first name is <span className="contentDescHighlighted">John</span> and last name is <span className="contentDescHighlighted content_bold">Smith</span>.
</p>
{/* current outcome when using dangerouslySetInnerHTML */}
<p
className="contentDesc"
dangerouslySetInnerHTML={{__html: handleAddingHighlight(`My first name is @John# and last name is %Smith#.`)}}
></p>
</>
)
}
解决方案
这就是问题所在。使用dangerouslySetInnerHTML
属性呈现的内容必须是HTML
元素。他们根本不是JSX
。它应该是
class
(这是 HTML 属性)
代替
className
(这是 JSX 属性)
推荐阅读
- angular - Angular8:[attr.title]='myVar' 和 [title]='myVar' 有什么区别?
- html - 如何将元素的大小限制为模态对话框的大小?
- c++ - 这个将十进制转换为二进制的C++循环的逻辑是什么
- arrays - 如何在 Flutter 应用程序中获取 JSON 数据?
- c# - ASP.Net Core 3 远程证书在 MacOs 上无效
- xcode - 无法使用 SwiftUI Preview 在 Xcode 中预览 Widget
- python - 使用 Python pandas 计算调整后的成本基数(股票买入/卖出的投资组合分析)
- mysql - mySQL - 如何使用 sql 查询将字符串转换为 int 和字符串到日期
- canvas - 如何使用 ChartJS 收紧标签上的字母间距?
- vb.net - 检测 Try...Catch 的“发件人”