我们不能在 React.js 中的数组中迭代 material-ui 吗？

Question

我一直在尝试使用material ui并在数组中对其进行迭代(用于为电子商务网站中的某些项目创建评级(。代码不起作用。在我的本地主机服务器上，它根本没有显示任何星星。在我使它动态化之前，它运行得很好，然后我根据向我的功能组件添加道具，使其动态化。其他一切都很好，只是它不接受数组中的矩阵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并使用了它。它不起作用。

Answer 1

看起来您不小心在图标组件名称前面加了一个"p"。你有<p StarRateIcon className="star" />，而它应该是<StarRateIcon className="star" />

Answer 2

您呈现的p标记没有包含无效属性StarRateIcon的内容。这就是你没有看到任何渲染的原因。如果您检查HTML，您很可能会看到p标记。您还可能在控制台中看到有关无效属性的错误。你的代码应该是这样的：

Array(rating).fill().map(() => <StarRateIcon className="star" />)