我在变量中有一些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>
功能是我的关键。
但是这在我的页面中显示为这样。知道如何显示图标而不是标记吗?
从对象中删除模板字符串的重新设置:
export const PropertyDesign = {
clubhouse: <i className="fas fa-utensils icon-property"></i>,
}
使用模板字符串只会将其呈现为字符串而不是JSX。
也请在JSX中使用className
仅使用类名更改对象
export const PropertyIcons = {
clubhouse: "fas fa-utensils icon-property",
gymnasium: "fas fa-dumbbell icon-property",
swimingPool: "fas fa-swimming-pool icon-property",
joggingTrack: "fas fa-running icon-property",
playArea: "fab fa-playstation icon-property",
}
然后将其作为字符串传递给图标className
<i className={PropertyIcons[feature]} ></i>