React中含样式类的JSX渲染问题及三种解决方案

问题场景 #

在React项目中，开发者尝试通过JSON.stringify将包含样式类的JSX转为字符串，传入Text组件的subtitle属性，期望渲染出带样式的文本，但JSON.parse与JSON.stringify无法实现需求。

问题代码示例 #

export function Main () {
  return (
    <div className="py-4">
      <Discount/>
      <Text
        subtitle={`
          ${JSON.stringify(`${<h1>Some <p className="class">generation</p> here</h1>}` )}
        `}/>
    </div>
  )
}

可行解决方案 #

提供三种直接有效的实现方式：

方案1：直接传入JSX元素 #

直接将带样式的JSX结构作为属性值传入，React会直接渲染该结构，这是最贴合React设计范式的做法。

<Text
  title={<div className="flex flex-row gap-1.5">Some<p class='text-gradient'>solution1</p> here</div>}
/>

方案2：使用dangerouslySetInnerHTML #

将HTML字符串通过dangerouslySetInnerHTML注入到元素中，适合处理动态生成的HTML内容，但需注意防范XSS风险。

export function Main () {
  const subtitleHtml = `Some <p class='text-gradient'>solution2</p> here`;

  return (
    <div className="py-4">
      <Discount/>
      <Text
        subtitle={<div className="flex flex-row gap-1" 
          dangerouslySetInnerHTML={{ __html: subtitleHtml }} />}
      />
    </div>
  )
}

方案3：嵌套带样式的JSX结构 #

在父元素中嵌套带样式的子元素，灵活度最高，可自由搭配不同标签和样式类来构建复杂结构。

<Text
  solution3={
    <h1 class="text-7xl font-bold">
      The Next
      <span class="text-gradient"> solution 3 </span>
      Payment method.
    </h1>
  }
/>

内容的提问来源于stack exchange，提问作者Nevazno_html_css_js_3