React实现未登录点击Card组件弹出登录提示弹窗

1. 修复弹窗组件（TransitionsModal）的问题 #

你的弹窗组件当前存在两个核心问题：一是props接收方式错误，React组件的props以对象形式传递，需解构获取；二是弹窗的显示状态应该由父组件（Card）控制，而非组件内部初始化，这样才能实现点击Card触发弹窗的逻辑。

修改后的TransitionsModal代码：

import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import Modal from '@mui/material/Modal';
import Fade from '@mui/material/Fade';

import "./popup.css";

function TransitionsModal({ open, handleClose }) {
    return (
        <div>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                open={open}
                onClose={handleClose}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 500
                }}
            >
                <Fade in={open}>
                    <div className="popup-container" id='blur'>
                        <h1>Profil detaylarını görebilmek için lütfen giriş yapınız.</h1>
                        <div className='popup-buttons'>
                            <a className='giris-yap-wrapper' href="/signIn">
                                <input
                                    type="submit"
                                    value="Giriş Yap"
                                    className="popup-input-login"
                                    onClick={handleClose}
                                />
                            </a>
                            <input 
                                type="submit" 
                                value="Vazgeç" 
                                className="popup-input" 
                                onClick={handleClose}
                            />
                        </div>
                    </div>
                </Fade>
            </Modal>
        </div>
    );
}

export default TransitionsModal;

改动说明：

• 改用解构方式接收open和handleClose props，将弹窗的显示控制权交给父组件
• 移除组件内部的useState，避免状态管理混乱
• 修正原生onclick为React规范的onClick，统一使用handleClose关闭弹窗

2. 修改Card组件实现点击触发弹窗 #

在Card组件中添加状态变量控制弹窗显示，同时在点击事件中判断用户授权状态，执行对应逻辑：

修改后的Card代码：

import * as React from 'react';
import { useState } from 'react';
import './card.css';
import HeartButton from "./HeartButton";

// 修正导入的组件名，与弹窗组件的导出名保持一致
import TransitionsModal from './Pop';

const Card = ({ profile, auth }) => {
    // 添加状态变量，控制弹窗的显示与隐藏
    const [showModal, setShowModal] = useState(false);

    const handleClick = () => {
        // 未登录状态下，打开弹窗
        if (!auth) {
            setShowModal(true);
        } else {
            // 已登录状态下，可执行其他业务逻辑（比如跳转到详情页）
            console.log('已登录，可访问内容详情');
        }
    };

    // 定义关闭弹窗的方法，传递给子组件
    const handleModalClose = () => {
        setShowModal(false);
    };

    return (
        <div className='influencer-profile-card' onClick={handleClick}>
            <div>
                <HeartButton />
            </div>

            <div className="profile_picture">
                <img 
                    src={profile.picture !== 'N/A' ? profile.picture : 'https://via.placeholder.com/400'} 
                    alt={profile.name} 
                />
            </div>

            <div className="info">
                <h3>{profile.name}</h3>
                <h4>{profile.ID + " • " + profile.category}</h4>
            </div>

            {/* 渲染弹窗组件，传入控制参数 */}
            <TransitionsModal open={showModal} handleClose={handleModalClose} />
        </div>
    );
};

export default Card;

改动说明：

• 添加showModal状态变量，负责控制弹窗的显示/隐藏
• 在handleClick中判断auth状态，未登录时设置showModal为true打开弹窗
• 定义handleModalClose方法，用于关闭弹窗并传递给子组件
• 修正弹窗组件的导入名，确保与导出的TransitionsModal一致
• 在Card的JSX结构中渲染弹窗组件，传入open和handleClose props

修改完成后，当用户未登录（auth=false）时点击Card组件，会自动弹出登录提示弹窗；已登录状态下则可执行你预设的其他业务逻辑。

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