reactjs - 如何将 HTML 元素添加到 JavaScript 对象中并在 React 中使用

Question

这是 JavaScript 对象中的代码

const AlbumDetails = [
{
    name: '<i class="fas fa-check">Basic</i>',
    price: '',
    details: [],
},
{ name: '<i class="fas fa-check">Intermediate</i>', price: '', details: [] },
{ name: '<i class="fas fa-check">Pro</i>', price: '', details: [] },
{ name: '<i class="fas fa-check">Ultimate</i>', price: '', details: [] },
];

export default AlbumDetails;

我想像这样使用这个对象

const PriceCard = (props) => {
<div className="p-box">
                    
    <div className="p-content">
        <h2>{props.AlbumDetails[0].name}</h2>
        <h4>{props.AlbumDetails[0].price}</h4>
        
        
    </div>
</div>
}

等等。 在浏览器中显示<i class="fas fa-check">Basic</i> ，但我只想要图标和名称“基本”。 那么如何才能做到。

Answer 1

可以使用 dangerouslySetInnerHTML 插入 HTML 字符串:

<h2 dangerouslySetInnerHTML={{ __html: props.AlbumDetails[0].name }} />

注意:您需要确保 HTML 是安全的(即不是由用户输入形成的)，否则您可能会面临 XSS。