如何通过HeroSection组件按钮触发App.js渲染Modal弹窗？

问题描述 #

我的应用包含三个组件：

• App.js
• HeroSection.js
• Modal.js

触发Modal的按钮在HeroSection组件中，但受CSS Grid布局限制，在HeroSection内渲染Modal时无法让它在屏幕居中。我需要在App.js中渲染Modal，同时保留HeroSection里的触发按钮。

之前尝试把弹窗的开闭逻辑直接复制到App.js，但这样必须把触发按钮也移到App.js里，不符合需求，请问该怎么实现？

原代码 #

App.js

const App = ({ signOut }) => {
    return (
        <div>
            <button onClick={clickOpenAccountModal} className='add-account'>Add Account</button>
            {openAddAccountModal && <Modal closeModal={setOpenAddAccountModal} />}
            <div className="App">
                <div className='nav-pane'>
                    <SideBar signOut={signOut} />
                </div>
                <div className='content-pane'>
                    <MainContent />
                </div>
            </div>
        </div>
    );
}

HeroSection.js

const HeroSection = () => {
    // Add Acount Button
    const [openAddAccountModal, setOpenAddAccountModal] = useState(false);
    const clickOpenAccountModal = () => {
        setOpenAddAccountModal(true);
    }

    // Add Transaction Button
    const [openAddTransactionModal, setOpenAddTransactionModal] = useState(false);
    const clickOpenTransactionModal = () => {
        setOpenAddTransactionModal(true);
    }

    return (
        <div className='hero-section'>
            <h1 className='page-title'>Users's Dashboard</h1>
            <div className='hero-buttons'>
                <button onClick={clickOpenAccountModal} className='add-account'>Add Account</button>
                {openAddAccountModal && <Modal closeModal={setOpenAddAccountModal} />}
                <button onClick={clickOpenTransactionModal} className='add-transaction'>Add Transaction</button>
                {openAddTransactionModal && <Modal closeModal={setOpenAddTransactionModal} />}
            </div>
        </div>
    );
}

Modal.js

const Modal = ({ closeModal }) => {
    return (
        <div className='modal-background'>
            <div className='modal-container'>
                <div className='title-container'>
                    <h2>Add Account</h2>
                    <button className='exit-button' onClick={() => closeModal(false)}>X</button>
                </div>
            </div>
        </div>
    );
}

界面效果对比 #

主应用界面

HeroSection内渲染Modal的问题效果

期望的居中显示效果

解决方案 #

核心思路是状态提升：将Modal的显示状态（打开/关闭）提升到App组件中管理，通过props将打开Modal的方法传递给HeroSection，HeroSection里的按钮调用该方法触发Modal显示，Modal的渲染放在App组件中，这样就能脱离HeroSection的布局限制实现全屏居中。

修改后的代码 #

App.js

import { useState } from 'react';
import HeroSection from './HeroSection';
import Modal from './Modal';
import SideBar from './SideBar';
import MainContent from './MainContent';

const App = ({ signOut }) => {
    // 管理两个Modal的显示状态
    const [openAddAccountModal, setOpenAddAccountModal] = useState(false);
    const [openAddTransactionModal, setOpenAddTransactionModal] = useState(false);

    // 打开账户Modal的回调
    const handleOpenAccountModal = () => {
        setOpenAddAccountModal(true);
    };

    // 打开交易Modal的回调
    const handleOpenTransactionModal = () => {
        setOpenAddTransactionModal(true);
    };

    return (
        <div>
            {/* 在App根层级渲染Modal，脱离Grid布局限制 */}
            {openAddAccountModal && <Modal closeModal={() => setOpenAddAccountModal(false)} title="Add Account" />}
            {openAddTransactionModal && <Modal closeModal={() => setOpenAddTransactionModal(false)} title="Add Transaction" />}
            
            <div className="App">
                <div className='nav-pane'>
                    <SideBar signOut={signOut} />
                </div>
                <div className='content-pane'>
                    {/* 将打开Modal的回调传递给MainContent，再由它透传给HeroSection */}
                    <MainContent 
                        onOpenAccountModal={handleOpenAccountModal}
                        onOpenTransactionModal={handleOpenTransactionModal}
                    />
                </div>
            </div>
        </div>
    );
}

HeroSection.js

const HeroSection = ({ onOpenAccountModal, onOpenTransactionModal }) => {
    return (
        <div className='hero-section'>
            <h1 className='page-title'>Users's Dashboard</h1>
            <div className='hero-buttons'>
                {/* 调用App传递过来的回调打开Modal */}
                <button onClick={onOpenAccountModal} className='add-account'>Add Account</button>
                <button onClick={onOpenTransactionModal} className='add-transaction'>Add Transaction</button>
            </div>
        </div>
    );
}

Modal.js

const Modal = ({ closeModal, title }) => {
    return (
        <div className='modal-background'>
            <div className='modal-container'>
                <div className='title-container'>
                    <h2>{title}</h2>
                    <button className='exit-button' onClick={() => closeModal()}>X</button>
                </div>
            </div>
        </div>
    );
}

关键改动说明 #

1. App.js：新增两个Modal的状态管理，定义打开Modal的回调函数，在根层级渲染Modal，确保Modal不受HeroSection布局影响；同时将回调函数传递给MainContent，再由MainContent透传给HeroSection。
2. HeroSection.js：移除内部的状态管理逻辑，通过props接收打开Modal的回调，按钮点击时直接调用这些回调触发Modal显示。
3. Modal.js：新增title props，让Modal可以根据不同场景显示对应标题，提升组件复用性。

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