[英]className not working on dangerouslySetInnerHTML
I've initial string
like this:-我有这样的初始string
:-
My first name is @John# and last name is %Smith#.
Where I'll replace :-我将在哪里更换:-
@
with <span className="contentDescHighlighted">
@
with <span className="contentDescHighlighted">
%
with <span className="contentDescHighlighted content_bold">
%
与<span className="contentDescHighlighted content_bold">
#
with </span>
#
与</span>
the working code is as follow:-工作代码如下:-
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
}
After changing the string
, then I'll inject them using dangerouslySetInnerHTML
as follow:-更改string
,我将使用dangerouslySetInnerHTML
SetInnerHTML 注入它们,如下所示:-
<p
className="contentDesc"
dangerouslySetInnerHTML={{__html: handleAddingHighlight(`My first name is @John# and last name is %Smith#.`)}}
></p>
Unfortunately, the styling/className applied didn't take any effect at all as shown below:-不幸的是,应用的样式/类名称根本没有任何效果,如下所示:-
// 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>
</>
)
}
This is the issue.这是问题。 content rendered using dangerouslySetInnerHTML
property must be HTML
elements.使用dangerouslySetInnerHTML
属性呈现的内容必须是HTML
元素。 They aren't JSX
at all.它们根本不是JSX
。 It should be它应该是
class
(which is HTML attribute) (这是 HTML 属性)
instead of代替
className
(which is JSX attribute) (这是 JSX 属性)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.