如何将 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>，但我只想要图标和名称“Basic”。那么如何才能做到。

Answer 1

可以使用 dangerouslySetInnerHTML:

插入 HTML 字符串

<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

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

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>
);

您可以阅读更多相关内容here

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

How to add HTML elements in to JavaScript object and use in react

javascript-objects

reactjs

htmlelements