![](/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.