![](/img/trans.png)
[英]Add className attribute to dangerouslySetInnerHTML contents
[英]className not working on dangerouslySetInnerHTML
我有这样的初始string
:-
My first name is @John# and last name is %Smith#.
我将在哪里更换:-
@
with <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
SetInnerHTML 注入它们,如下所示:-
<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 属性)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.