如何将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

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

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

注意：您需要确信HTML是安全的(即不是由用户输入形成的(，否则您可以使用XSS。

Answer 2

与其将整个JSX保留在数组中，不如只保留数组中的单词

const AlbumDetails = [
{
name: 'Basic',
price: '',
details: [],
},
{ name: 'Intermediate', price: '', details: [] },
{ name: 'Pro', price: '', details: [] },
{ name: 'Ultimate', price: '', details: [] },

并将JSX保留在组件中，而只访问像这样的内容

const PriceCard = (props) => {
<div className="p-box">

<div className="p-content">
<h2><i class="fas fa-check">{props.AlbumDetails[0].name}</i></h2>
<h4>{props.AlbumDetails[0].price}</h4>
</div>
</div>

Answer 3

从您的示例中，我看到您试图显示同一数据源的多个元素。您可以使用JavaScriptmap((函数，这样您就不必使用索引来引用它们，并避免重复的代码行。请参考以下代码。

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: [] }
];
const PriceCard = (props) => (
<div className="p-box">
<div className="p-content">
{props.AlbumDetails.map((album) => (
<div key={album.name}>
<h2>{album.name}</h2>
<h4>{album.price}</h4>
</div>
))}
</div>
</div>
);

你可以在这里阅读更多关于