React中点击合作伙伴按钮渲染对应内容Modal的实现方法

你只需要新增一个状态存储当前选中的合作伙伴数据，修改点击事件传参逻辑即可，以下是修改后的完整代码：

import React,{useEffect , useState} from 'react'
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";

const json ; // this is some mockup api response  , assume it has the properties referred to
const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4,
};
const Rewards = ()=>{
    const [showModal, setModal] = useState(false);
    // 新增状态：存储当前选中的合作伙伴信息
    const [selectedPartner, setSelectedPartner] = useState(null);

    // 修改点击处理函数，接收合作伙伴对象参数
    const handleClick = (partner = null)=>{
        // 传了partner说明是点击打开按钮，否则是关闭操作
        if(partner){
            setSelectedPartner(partner);
            setModal(true);
        }else{
            setSelectedPartner(null);
            setModal(false);
        }
    }

    return (
        <div>
            <ul>
                {json.reward_partners.map((d, index)=>{
                    return (
                        <li key = {index}>
                            <img src = {d.img} alt={d.name}/>
                            <h3>{d.name}</h3>
                            <p>{d.content}</p>
                            {/* 点击时传入当前合作伙伴对象 */}
                            <Button className="button" onClick= {() => handleClick(d)}>Know More</Button>
                            </li>
                    )
                })}
                <Modal open = {showModal} onClose={handleClick}>
                    <Box sx = {style}>
                        {/* 直接读取选中的合作伙伴字段渲染 */}
                        {selectedPartner && (
                            <>
                                <img src={selectedPartner.img} alt={selectedPartner.name} style={{width: '100%'}}/>
                                <Typography variant="h5" component="h3" mt={2}>{selectedPartner.name}</Typography>
                                <Typography variant="body1" mt={1}>{selectedPartner.content}</Typography>
                                {/* 你可以在这里加更多需要展示的字段 */}
                                <Button onClick={handleClick} sx={{mt: 2}} variant="contained">关闭</Button>
                            </>
                        )}
                    </Box>
                </Modal>
            </ul>
        </div>
    )
}

export default Rewards

注意事项 #

• Modal不要放在map循环内部，否则会给每个合作伙伴都生成一个独立弹窗，造成不必要的性能开销，你当前把Modal放在循环外的写法是最优的。
• 如果需要展示更多合作伙伴的字段，直接从selectedPartner对象中取对应属性即可。

内容的提问来源于stack exchange，提问作者Altair21