问题描述
这是 JavaScript 对象中的代码
const AlbumDetails = [
{
name: '<i class="fas fa-check">Basic</i>',price: '',details: [],},{ name: '<i class="fas fa-check">Intermediate</i>',details: [] },{ name: '<i class="fas fa-check">Pro</i>',{ name: '<i class="fas fa-check">Ultimate</i>',];
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”。
那么如何才能做到。
解决方法
HTML 字符串可以使用 dangerouslySetInnerHTML 插入:
<h2 dangerouslySetInnerHTML={{ __html: props.AlbumDetails[0].name }} />
注意:您需要确信 HTML 是安全的(即不是由用户输入形成的),否则您可能会面临 XSS。
,不要将整个 JSX 保留在数组中,而是只保留数组中的单词
const AlbumDetails = [
{
name: 'Basic',price: '',details: [],},{ name: 'Intermediate',details: [] },{ name: 'Pro',{ name: 'Ultimate',
并将 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>
,
从您的示例中,我看到您正在尝试显示同一数据源的多个元素。您可以使用 JavaScript map() 函数,这样您就不必使用索引来引用它们并避免重复的代码行。请参考以下代码。
const AlbumDetails = [
{
name: '<i class="fas fa-check">Basic</i>',price: "",details: []
},{ name: '<i class="fas fa-check">Intermediate</i>',{ name: '<i class="fas fa-check">Pro</i>',{ name: '<i class="fas fa-check">Ultimate</i>',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