如何在React中实现内容随点击元素动态变化的Modal弹窗

你的实现思路是正确的，只需要修复两处遗漏问题即可实现需求：

1. 渲染Modal组件时没有将存在state里的动态数据传给Modal，导致Modal内部拿不到对应内容
2. 现有代码存在两处语法错误，导致逻辑无法正常运行：openMoreMoney 函数缺少闭合花括号、App组件return后的JSX内容错误使用大括号包裹，应改为小括号。

修正后的App.js代码 #

import { useState } from 'react';
import Modal from './Modal';

function App() {
    const [modal, setModal] = useState({ show: false, data: null });

    const openNoWebsite = () => {
        setModal({ 
            show: true, 
            data: { title: '找不到网站', subtitle: '2021年拥有一个官方网站是业务发展的必备条件。' } 
        });
    };

    const openMoreMoney = () => {
        setModal({ 
            show: true, 
            data: { title: '提升营收', subtitle: "你自认产品非常优秀，但用户关注度很低，销售数据始终没有增长。"} 
        });
    };

    const handleCloseModal = () => {
        setModal({ show: false, data: null });
    };

    return (
        <div className="main">
            <button className="solidText" onClick={openNoWebsite}>
                按钮1
            </button>
            <button className="solidText" onClick={openMoreMoney}>
                按钮2
            </button>
            {/* 给Modal组件传入存储的data数据 */}
            {modal.show && modal.data && <Modal closeModal={handleCloseModal} data={modal.data} />}
        </div>
    );
}

export default App;

优化方案 #

如果后续要新增更多触发弹窗的按钮，可以写通用的弹窗打开方法，避免每个按钮单独写处理函数：

// 通用打开方法
const openModal = (customData) => {
    setModal({ show: true, data: customData });
};

// 按钮调用示例
<button onClick={() => openModal({title: '自定义标题', subtitle: '自定义说明'})}>
  按钮3
</button>

Modal组件不需要做任何修改，原有逻辑已经正确接收data参数并渲染对应内容。

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