Wie verwende ich mehrere React-Bootstrap-Muster?
P粉277464743
P粉277464743 2024-04-01 17:22:14
0
1
379

Ich habe ein React-Bootstrap-Modal, in dem ich meine Daten zuordne, aber das Problem ist, wenn ich auf das Modal klicke, zeigen alle Modalitäten die gleichen Daten an, es ist offensichtlich das letzte Element des Arrays in allen Modalitäten. Ich möchte Modalitäten dynamisch generieren und unterschiedliche Daten für verschiedene Modalitäten anzeigen.

const content: { cardimg: string, Name: string, Post: string, Nation: string, About: string, mod:string }[] = [
{
"cardimg": `hello`,
"Name": "someone 1",
"Post": "Chairman & CEO",
"Nation": "India",
"About": "holds a degree of Executive MBA in Entrepreneurship from Rennes School of Business, France.",
"mod": "one"
},
{
"cardimg": `world`,
"Name": "someone 2",
"Post": "Deputy CEO",
"Nation": "India",
"About": "holds a degree in MBA Finance, someone 2 has more than 7 years of experience in Customer Engagement Services.",
"mod": "two"
},

const Leadershipcard = (prop: props) =\> {

    const [modalShow, setModalShow] = useState(false)
    
    
    return (
        <>
            {content.map((e) =>
                <div className="card col-lg-6 p-0" style={{ "width": "18rem" } as React.CSSProperties}>
                    <img src={`Assets\About\team\${e.cardimg}.webp`} className="card-img-top" alt="..." />
                    <div className="card-body">
                        <h5 className="card-title">{e.Name}</h5>
                        <p className="card-text">{e.Post}</p>
                        <a href="/" className="d-block fs-4"><i className="fa-brands fa-linkedin-in"></i></a>
                        <button className="btn btn-outline-dark btn-dark rounded-0 text-bg-light mt-2 vi-more"
                            onClick={() => setModalShow(true)} data-bs-toggle="modal" data-bs-target={`/mod${e.mod}`}>View More</button>
                       ** <Modals
                            show={modalShow}
                            onHide={() => setModalShow(false)}
                            Img={e.cardimg}
                            Name={e.Name}
                            Post={e.Post}
                            Nation={e.Nation}
                            About={e.About}
                            mod={e.mod}
                        />**
                    </div>
                </div>
            )}
        </>
    )

}

export default Leadershipcard
[Modal component that I used (Bold text above)](https://i.stack.imgur.com/Cg01P.png)

P粉277464743
P粉277464743

Antworte allen(1)
P粉677573079

模态状态必须维护在数组中以跟踪特定模态。

我们可以通过在打开和关闭模态时传递数组索引来实现。

import React, { useEffect, useState } from "react";
import { Button, Modal } from "react-bootstrap";

const Modals = ({ show, onHide, about, name }) => {
  return (
    
      
        {name}
      
      {about}
      
        
      
    
  );
};

const content = [
  {
    cardimg: `hello`,
    Name: "someone 1",
    Post: "Chairman & CEO",
    Nation: "India",
    About:
      "Holds a degree of Executive MBA in Entrepreneurship from Rennes School of Business, France.",
    mod: "one"
  },
  {
    cardimg: `world`,
    Name: "someone 2",
    Post: "Deputy CEO",
    Nation: "India",
    About:
      "Holds a degree in MBA Finance, someone 2 has more than 7 years of experience in Customer Engagement Services.",
    mod: "two"
  }
];

const LeadershipCard = (prop) => {
  const [modalShow, setModalShow] = useState([]);

  const handShow = (index) => {
    const modalStateClone = [...modalShow];
    modalStateClone[index] = true;
    setModalShow(modalStateClone);
  };

  const handleClose = (index) => {
    const modalStateClone = [...modalShow];
    modalStateClone[index] = false;
    setModalShow(modalStateClone);
  };

  useEffect(() => {
    if (content?.length > 0) {
      const contentArr = content.map((c) => {
        return false;
      });
      console.log(contentArr);
      setModalShow(contentArr);
    }
  }, []);

  return (
    
      {content.map((e, index) => (
        
{e.Name}

{e.Post}

handleClose(index)} img={e.cardimg} name={e.Name} post={e.Post} nation={e.Nation} about={e.About} mod={e.mod} />
))} > ); }; export default LeadershipCard;
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!