arrays - 在数组列表上 react 模态

Question

需要一些帮助:D

我正在尝试将我的数组拉为列表。在每个列表上单击(每个列表包含数组中的数据)以打开正确的模式，该模式将包含数组数据文件中的其余信息。另外，我无法通过 const Details 提取数组，因此它可以显示我需要的数据，但不知道如何显示。在我的其他文件中，我仅调用该组件。

这是我的代码:

import React, { useState } from "react";

//ProductsData
import { ProductData } from "../products/data";

const Products = () => {
  const [showModal, setshowModal] = useState(false);
  const [hasClass, changeClass] = useState({
    activeObject: null,
    objects: ProductData.map((product) => {
      return product.id;
    }),
  });

  function toggleActive(index) {
    setshowModal(true);
    changeClass({ ...hasClass, activeObject: hasClass.objects[index] });
  }

  function toggleActiveClass(index) {
    if (hasClass.objects[index] === hasClass.activeObject) {
      return "active";
    } else {
      return "inactive";
    }
  }

  const Details = (ProductData) => (
    <div id="productModal" className={toggleActiveClass()}>
      <div className="product-img-holder">
        <img src={product.image} alt="img" />
      </div>
      <div className="product-details">
        <span className="list-title">
          {product.name}
          <br /> <span>{product.subtitle}</span>
        </span>
        <span className="list-grams">{product.grams}</span>
        <span className="list-price">{product.price}</span>
        <span className="list-desc">{product.desc}</span>
        <span className="list-cart">{product.cart}</span>
      </div>
    </div>
  );

  return (
    <>
      <ul className="list-menu">
        {ProductData.map((product, index) => (
          <li
            key={index}
            onClick={() => toggleActive(index)}
            className={toggleActiveClass(index)}
          >
            <span className="list-title">
              {product.name} <br /> <span>{product.subtitle}</span>
            </span>
            <span className="list-grams">{product.grams}</span>
            <span className="list-price">{product.price}</span>
          </li>
        ))}
      </ul>
      {showModal ? <Details /> : null}
    </>
  );
};

export default Products;

感谢您的帮助。

Answer 1

这是工作示例:

import React, { useState } from "react";

const productData = [
  { id: 1, label: "product1", description: "description1" },
  { id: 2, label: "product2", description: "description2" },
  { id: 3, label: "product3", description: "description3" },
  { id: 4, label: "product4", description: "description4" },
  { id: 5, label: "product5", description: "description5" },
  { id: 6, label: "product6", description: "description6" },
  { id: 7, label: "product7", description: "description7" },
];

const Products = () => {
  const [showModal, setShowModal] = useState(false);
  const [activeObject, setActiveObject] = useState(null);

  function getClass(index) {
    return index === activeObject?.id ? "active" : "inactive";
  }

  // here className can not be "inactive" since Modal always shows activeObject
  const Modal = ({ object: { label, description } }) => (
    <div id="productModal" className="active">
      This is modal
      <h2>{label}</h2>
      <span className="description">{description}</span>
      <button onClick={() => setShowModal(false)}>Close me</button>
    </div>
  );

  return (
    <>
      <ul className="list-menu">
        {productData.map(({ id, label, description }) => (
          <li
            key={id}
            onClick={() => {
              setActiveObject({ id, label, description });
              setShowModal(true);
            }}
            className={getClass(id)}
          >
            <h2>{label}</h2>
          </li>
        ))}
      </ul>
      {showModal ? <Modal object={activeObject} /> : null}
    </>
  );
};

export default Products;