使用React组织/管理多个模态的“正确”方式

import React, { useState } from 'react';

const ModalManager = () => {
  const [modals, setModals] = useState([]);

  const openModal = (modal) => {
    setModals([...modals, modal]);
  };

  const closeModal = (modalId) => {
    setModals(modals.filter(modal => modal.id !== modalId));
  };

  return (
    <>
      {modals.map(modal => (
        <Modal key={modal.id} onClose={() => closeModal(modal.id)}>
          {modal.content}
        </Modal>
      ))}
    </>
  );
};

export default ModalManager;

import React from 'react';
import ModalManager from './ModalManager';

const App = () => {
  const openModal1 = () => {
    ModalManager.openModal({
      id: 'modal1',
      content: 'Modal 1 Content'
    });
  };

  const openModal2 = () => {
    ModalManager.openModal({
      id: 'modal2',
      content: 'Modal 2 Content'
    });
  };

  return (
    <div>
      <button onClick={openModal1}>Open Modal 1</button>
      <button onClick={openModal2}>Open Modal 2</button>
      <ModalManager />
    </div>
  );
};

export default App;