将道具传递给modal传递每个对象

// 父组件
import React, { useState } from 'react';
import Modal from './Modal';

const ParentComponent = () => {
  const [modalData, setModalData] = useState({}); // 创建一个包含道具的对象

  const handleOpenModal = () => {
    // 设置需要传递的对象数据
    setModalData({
      name: 'John',
      age: 25,
      email: 'john@example.com',
    });
  };

  return (
    <div>
      <button onClick={handleOpenModal}>打开模态框</button>
      <Modal data={modalData} /> // 将对象作为props传递给模态框组件
    </div>
  );
};

// 模态框组件
const Modal = ({ data }) => {
  return (
    <div>
      <h2>模态框</h2>
      <p>姓名：{data.name}</p> // 使用传递的对象数据
      <p>年龄：{data.age}</p>
      <p>邮箱：{data.email}</p>
    </div>
  );
};

export default ParentComponent;