className 不适用于 dangerouslySetInnerHTML

Question

我初始 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>

不幸的是，应用的styling/className根本没有任何效果，如下所示：-

  // 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>
    </>
  )
}

Answer 1

这就是问题所在。使用 dangerouslySetInnerHTML 属性呈现的内容必须是 HTML 元素。他们根本不是 JSX。应该是

class

（即 HTML 属性）

而不是

className

（这是 JSX 属性）

className 不适用于 dangerouslySetInnerHTML

className not working on dangerouslySetInnerHTML

classname

reactjs

dangerouslysetinnerhtml

完整的组件如下所示