javascript - 在变量中使用 html

Question

我的变量中有一些 html

export const PropertyDesign = {
 clubhouse: `<i class="fas fa-utensils icon-property"></i>`,
 gymnasium: `<i class="fas fa-dumbbell icon-property"></i>`,
 swimingPool: `<i class="fas fa-swimming-pool icon-property"></i>`,
 joggingTrack: `<i class="fas fa-running icon-property"></i>`, 
 playArea: `<i class="fab fa-playstation icon-property"></i>`
}

我想在我的 javascript 的 JSX 中使用它，我最初尝试过这个

    <p> {PropertyDesign[feature]} </p>

功能是我的关键。

但这在我的页面中显示如下。知道如何显示图标而不是标记吗？

Answer 1

从对象中删除模板字符串表示:

export const PropertyDesign = {
 clubhouse: <i className="fas fa-utensils icon-property"></i>,
}

使用模板字符串只会将其呈现为字符串，而不是 JSX。

此外，在 JSX 中使用 className