如何将跨度元素插入 object（字符串）？

Question

我正在使用样式化的组件。 我接受一个 h1 元素作为来自 object 的道具，其中包含一个名为title的字符串。 如何将 span 元素插入 object 的字符串中，这样我就可以像硬编码文本时通常那样单独设置这部分的样式？

export const heroData = {
  title: `Finance Data`,

Answer 1

您可以使用dangerouslySetInnerHTML属性将原始 HTML 字符串添加到 HTML。

export const heroData = {
  title: "Finance <span style="color: red;">Data</span>"
... ...

<div dangerouslySetInnerHTML={{_html: heroData.title}} />