我们不能在 React.js 的数组中迭代 material-ui 吗?
Can't we iterate material-ui inside an array in React.js?
我一直在尝试使用 material-ui 并在数组中对其进行迭代(用于为电子商务网站中的某些项目创建评级)。代码不工作。在我的本地主机服务器上,它根本没有显示任何星星。在我让它动态之前,它工作得很好,然后我根据它动态添加道具到我的功能组件。其他一切都工作得很好,除了它不接受数组内的我的 matrial-ui 图标供我迭代。此外,import 语句说“尽管它是导入的,但它的值永远不会被读取”
我的代码: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" />
您呈现的 p
标签没有包含无效属性 StarRateIcon
的内容。这就是您看不到任何渲染的原因。如果您检查 HTML,您很可能会看到 p
标签。您还可能会在控制台中看到有关无效属性的错误。您的代码应如下所示:
Array(rating).fill().map(() => <StarRateIcon className="star" />)
我一直在尝试使用 material-ui 并在数组中对其进行迭代(用于为电子商务网站中的某些项目创建评级)。代码不工作。在我的本地主机服务器上,它根本没有显示任何星星。在我让它动态之前,它工作得很好,然后我根据它动态添加道具到我的功能组件。其他一切都工作得很好,除了它不接受数组内的我的 matrial-ui 图标供我迭代。此外,import 语句说“尽管它是导入的,但它的值永远不会被读取”
我的代码: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" />
您呈现的 p
标签没有包含无效属性 StarRateIcon
的内容。这就是您看不到任何渲染的原因。如果您检查 HTML,您很可能会看到 p
标签。您还可能会在控制台中看到有关无效属性的错误。您的代码应如下所示:
Array(rating).fill().map(() => <StarRateIcon className="star" />)