我一直在尝试使用material-ui并在数组中对其进行迭代(用于为某些项目(例如电子商务网站中的某些项目)创建评级)。该代码不起作用。在我的本地主机服务器上,它根本没有显示任何星星。在将其设为动态之前,它工作得很好,然后我将 Prop 添加到我的功能组件中以使其动态。其他一切都工作正常,除了它不接受数组内的 matial-ui 图标供我迭代。此外,导入声明说“尽管它是导入的,但它的值从未被读取”
我的代码:Product.js:
import React from "react";
import "./Product.css";
import StarRateIcon from "@material-ui/icons/StarRate";
function Product({ id, title, image, price, rating }) {
return (
<div className="product">
<div className="product_info">
<p>{title}</p>
<p className="product_price">
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product_rating">
{Array(rating)
.fill()
.map((_, i) => (
<p StarRateIcon className="star" />
))}
</div>
</div>
<img src={image} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
我的 home.js 文件:
import React from "react";
import "./Home.css";
import Product from "./Product";
function Home() {
return (
<div classname="home">
<div className="home_container">
<img
className="home_image"
src="https://m.media-amazon.com/images/G/01/digital/video/sonata/US3P_JOKER_IMAGE_ID/be07783e-2738-4aaf-b90c-d0ec474d15ae._UR3000,600_SX1500_FMwebp_.jpg"
/>
<div className="home_row">
<Product
id="890778"
title="Description"
price={99.99}
image="https://m.media-amazon.com/images/I/71BGLa7IFtL._AC_UY218_.jpg"
rating={5}
/>
<Product />
</div>
</div>
</div>
);
}
export default Home;
帮助某人!我可以使用表情符号片段,但我真的希望它能起作用。我已经导入了 StarRateIcon 并使用了它。它不起作用。
最佳答案
看起来您不小心在图标组件名称前面添加了“p”。您有<p StarRateIcon className="star" />
什么时候应该是<StarRateIcon className="star" />
关于javascript - 我们不能在 React.js 的数组中迭代material-ui吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63965290/