如何解决如何将 HTML 元素添加到 JavaScript 对象中并在 React 中使用
这是 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。