Как открыть диалог и вызов функции

Question

У меня есть компонент реагирования, в котором есть разные кнопки и пункты меню, которые открывают разные модалы, каждый со своим собственным компонентом реакции и подпорками.

Функции, которые я пытаюсь достичь:

• Каждый компонент должен контролировать свое собственное состояние закрытия и иметь поставщиков intl и store.
• Он должен получать реквизиты от родительского элемента, который его открыл.
• Предпочтительно, чтобы дочерний модальный компонент отображался под родительским деревом.
• Дочерний компонент должен иметь возможность обновлять родительское состояние или событие emit, если необходимо выполнить действие после закрытия.

Это то, что я имею в виду, поэтому далеко в архитектуре:

import openModal from '...';
import ChildComponent1 from '...';
import ChildComponent2 from '...';

class Parent extends React.Component {
    render() {
        return (
            <div>
                <button onClick={() => openModal(ChildComponent1, {prop1: 'prop 1 value'})}>
                    Open child component 1 in dialog
                </button>
                <button onClick={() => openModal(ChildComponent2, {prop2: 'prop 2 value'})}>
                    Open child component 2 in dialog
                </button>
            </div>
        );
    }
}

import { Modal } from 'antd';

export function openModal(ReactComponent, componentProps) {
    return (
        <Modal>
            <ReactComponent {...componentProps} />
        </Modal>
    );

    // OR

    return <ReactComponent {...componentProps} />;
}

export class ChildComponent1 extends React.Component {
    render() {
        return <button onClick={() => closeModal()}>{this.props.prop1}</button>;
    }
}

export class ChildComponent2 extends React.Component {
    render() {
        return <Modal>{this.props.prop2}</Modal>;
    }
}

Почти то, что я ищу, это что-то вроде Modal.method(), но принимает компонент реакции в качестве параметра. https://ant.design/components/modal/#Modal .method ()