如何使用多个 React-Bootstrap 模式？-PHP中文网问答

我有一个反应引导模式，我在其中映射我的数据，但问题是当我单击模式时，所有模式都显示相同的数据，它显然是所有模式中数组的最后一项。我想动态生成模态并为不同模态显示不同的数据。

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)

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;