Блог

Я пытался использовать material-ui и перебирать его внутри массива (для создания рейтингов для некоторых элементов, например, на сайтах электронной коммерции). Код не работает. На моем локальном сервере он вообще не показывает никаких звездочек. Прежде чем я сделал его динамическим, он работал нормально, затем я добавил реквизиты в свой функциональный компонент, чтобы сделать его динамичным. Все остальное работает просто отлично, за исключением того, что он не принимает мой значок material-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;
  

Помогите кто-нибудь! Я могу использовать фрагменты emoji, но я действительно хочу, чтобы это работало. Я импортировал StarRateIcon и использовал его. Это не работает.

Похоже, вы случайно поставили «p» перед именем вашего компонента icon. У вас есть <p StarRateIcon className="star" /> , когда это должно быть <StarRateIcon className="star" />

Вы отображаете p тег без содержимого с недопустимым атрибутом, StarRateIcon . Это причина, по которой вы ничего не видите. Если вы проверите HTML, вы, скорее всего, увидите p теги. Вы также можете увидеть ошибки в консоли о недопустимых атрибутах. Ваш код должен выглядеть примерно так:

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