如何將跨度元素插入 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}} />