Question

已在下面的答案中更新...

我试图了解以下内容是否可以分别绑定到每个数组项？

const [isDisplayed, setIsDisplayed] = useState(true);

我有一个物品清单。每个项目都有一个详细信息，我希望在处理onClick事件时显示该详细信息。但是，在工作的同时，它会显示所有项目的详细信息，而不仅仅是所讨论的项目。

或者，我是否必须为每个Item存储一个isDisplayed属性并使用useEffect / useReducer？

最终我正在使用它和一个三元表达式来将className设置为Hide或Show the。但只能在其中一个项目上同时使用“全部”。

这是我的代码：

import React, { useState, useContext } from "react";
import { PropertyContext } from "../../../context/property/propertyContext";

  const PropertyPortfolio = () => {

  const { property, addProperty } = useContext(PropertyContext);

  const [areRoomsDisplayed, setAreRoomsDisplayed] = useState(true);

  const toggleRooms = () => {
    setArePackagesDisplayed(arePackagesDisplayed ? false : true);
    setAreRoomsDisplayed(!areRoomsDisplayed);
  };

  const [arePackagesDisplayed, setArePackagesDisplayed] = useState(false);

  const togglePackages = () => {
    setAreRoomsDisplayed(areRoomsDisplayed ? false : true);
    setArePackagesDisplayed(!arePackagesDisplayed);
  };

  return (
    <div className="propertyList__container">
      <p>You currently have {property.length} properties listed.</p>
      {property.map((item, index) => (
        <div key={item.customerId} id={index} className="portfolioCard__container">
          <div className="portfolioCard__img">
            <img
              src={item.propertyList[0].images[0].url}
              alt="Hotel Awesome"
            />
          </div>
          <div className="portfolioCard__imgs">
            <img
              src={item.propertyList[0].images[0].url}
              alt="Hotel Awesome"
            />
            <img
              src={item.propertyList[0].images[0].url}
              alt="Hotel Awesome"
            />
            <img
              src={item.propertyList[0].images[0].url}
              alt="Hotel Awesome"
            />
          </div>
          <div className="portfolioCard__details">
            <article>
              <h2>Hotel Awesome</h2>
              <h3>Somewhere Awesome</h3>

              <ul>
                <li>
                  <span className="icon">
                    <IconContext.Provider
                      value={{ className: "navBar__icons" }}
                    >
                      <IoIosBed />
                    </IconContext.Provider>
                  </span>
                  <span>50 Rooms</span>
                </li>
                <li>
                  <span className="icon">
                    <IconContext.Provider
                      value={{ className: "navBar__icons" }}
                    >
                      <IoMdPeople />
                    </IconContext.Provider>
                  </span>
                  <span>5 Room Types</span>
                </li>
                <li>
                  <span className="icon">
                    <IconContext.Provider
                      value={{ className: "navBar__icons" }}
                    >
                      <FaSwimmer />
                    </IconContext.Provider>
                  </span>
                  <span>10 Facilities</span>
                </li>
                <li>
                  <span className="icon">
                    <IconContext.Provider
                      value={{ className: "navBar__icons" }}
                    >
                      <FaComments />
                    </IconContext.Provider>
                  </span>
                  <span>248 Reviews</span>
                </li>
              </ul>

              <p className="portfolioCard__details__description">
                Laborum duis Lorem eu deserunt aliqua et sunt in irure ut nisi
                cupidatat enim. Pariatur incididunt magna commodo ut nulla velit
                occaecat officia ex.
              </p>

              <p className="portfolioCard__details__facilities">
                <span>Facilities:&nbsp;</span>Wellness Center, Spa, Swimming
                Pool, Garden, 50 Seat Resturant, Car Park
              </p>

              <div className="portfolioCard__btngroup">
                <button>Reviews</button>
                <button>Details</button>
              </div>
            </article>
          </div>
          <div className="portfolioCard__price">
            <div className="portfolioCard__btngroup">
             /* MY onClick Events */

              <button onClick={toggleRooms}>Rooms</button>
              <button id={index} onClick={togglePackages}>Packages</button>

             /* MY onClick Event */
            </div>
            <div id={index} className={areRoomsDisplayed ? 'portfolioCard__rooms' : 'portfolioCard-toggle'}>
              <article>
                <div>
                  <IconContext.Provider value={{ className: "navBar__icons" }}>
                    <IoMdPerson />
                  </IconContext.Provider>
                </div>
                <p className="portfolioCard__type">Single</p>
                <p className="portfolioCard__nights">for 3 nights, 2 Adults</p>
                <div>
                  £45.00
                  <p className="portfolioCard__tax">inc Taxes & Charges</p>
                </div>
                <div>
                  <button>Request</button>
                </div>
              </article>
              <article>
                <div>
                  <IconContext.Provider value={{ className: "navBar__icons" }}>
                    <IoMdPeople />
                  </IconContext.Provider>
                </div>
                <p className="portfolioCard__type">Double</p>
                <p className="portfolioCard__nights">for 3 nights, 2 Adults</p>
                <div>
                  £45.00
                  <p className="portfolioCard__tax">inc Taxes & Charges</p>
                </div>
                <div>
                  <button>Request</button>
                </div>
              </article>
            </div>
            <div id={index} className={arePackagesDisplayed ? 'portfolioCard__packages' : 'portfolioCard-toggle'}>
              <article>
                <div>
                  <IconContext.Provider value={{ className: "navBar__icons" }}>
                    <GiHealthPotion />
                  </IconContext.Provider>
                </div>
                <p className="portfolioCard__type">Wellness</p>
                <p className="portfolioCard__nights">2 Days, 2 Adults</p>
                <div>
                  £145.00
                  <p className="portfolioCard__tax">inc Taxes & Charges</p>
                </div>
                <div>
                  <button>Request</button>
                </div>
              </article>
            </div>
          </div>

    </div>
  );
};

export default PropertyPortfolio;

答案...

由于@azium的建议，我为Item本身创建了一个组件，并将该Item传递到组件中。

{property.map((item, index) => (
    <PropertyItem item={item} index={index} />
))}

这使我可以使用三元更新Item内<div>上的className。

className={areRoomsDisplayed ? 'portfolioCard__rooms' : 'portfolioCard-toggle'}>

Answer 1

每个项目都应具有一些标志，以使其在单击按钮时可以显示。

其中一种方法是：

1）单击onClick时，将项目的id传递给处理程序，然后在项目上添加/更新属性，例如display: true或display: false。

2）然后，您将能够根据display是否为true来渲染每个项目。

Answer 2

答案...

由于@azium的建议，我为Item本身创建了一个组件，并将该Item传递到组件中。

{property.map((item, index) => (
    <PropertyItem item={item} index={index} />
))}

这使我可以使用三元更新Item内<div>上的className。

className={areRoomsDisplayed ? 'portfolioCard__rooms' : 'portfolioCard-toggle'}>

无法使用React useState更新单个数组项中的className

2 个答案: