Reactjs 使用自定义的基于反应的模式，如何传递动态触发功能，以便可以重用组件？

我有以下组成我的模态的组件：

import React from 'react';
import { ModalBody, Button, Alert } from 'bootstrap';
import { AppModalHeader } from '../../common/AppModalHeader';
import ModalWrapper from './ModalWrapper';

const QuestionModal= ({
    title,
    noText = 'No',
    yesText = 'Yes',
    questionText,
    onYesAction
    children
}) => {
    const { toggle, isOpen, openModal } = useModalForm();
    return (
        <React.Fragment>
            <ModalWrapper className={className} isOpen={isOpen} toggle={toggle}>
                <AppModalHeader toggle={toggle}>{modalTitle}</AppModalHeader>
                {isOpen ? (
                    <ModalBody>
                        <p>{questionText}</p>
                        <Button
                            className="float-right"
                            color="primary"
                            onClick={() => {
                                if (onYesAction !== undefined) {
                                    onYesAction(toggle);
                                }
                            }}
                        >
                            {yesText != null ? yesText : 'Yes'}
                        </Button>
                    </ModalBody>
                ) : null}
            </ModalWrapper>
            {children({
                triggerModal: () => openModal({ id: undefined }),
                toggle
            })}
        </React.Fragment>
    );
};

export default QuestionModal;

从“React”导入React；
从“引导”导入{ModalBody，Button，Alert}；
从“../../common/AppModalHeader”导入{AppModalHeader}；
从“/ModalWrapper”导入ModalWrapper；
常数=({
标题
noText='否'，
yesText=‘是’，
问题文本，
onYesAction
儿童
}) => {
常量{toggle，isOpen，openModal}=useModalForm（）；
返回(
{modalTitle}
{isOpen(
{问题文本}

{
if（onyeAction！==未定义）{
onYesAction（切换）；
}
}}
>
{yesText！=null？yesText:'是'}
)：null}
{儿童({
TriggerModel:（）=>OpenModel（{id:undefined}），
切换
})}
);
};
导出默认模式；

我想这样使用它，在这里我可以动态地选择打开模式的触发器的名称：

使用中，例如（注意：内部问题模式将重复，在我的申请中使用4或5次）：

。。。。
{（{triggerModal}）=>(
{（{triggerModal2}）=>(
TriggerModel（）；}>触发器模式1
triggerModal2（）；}>触发器模式2
)}
....

我如何通过扩展问题模式来传递一个动态函数来实现这一点？正因为我一直在考虑复制原始组件，我想让这个组件尽可能可重用。任何帮助都将不胜感激

---

提前感谢

我认为你把事情复杂化了。问题是你试图控制模态是否从模态本身内部呈现。如果你真的想拥有可重用的组件，最好将表示与逻辑解耦。在你的例子中，你想要一个模态组件使用所有的演示/布局/样式材料，并通过道具传递实际内容

例如：

import React from 'react';
import { ModalBody, Button, Alert } from 'bootstrap';
import { AppModalHeader } from '../../common/AppModalHeader';
import ModalWrapper from './ModalWrapper';

const QuestionModal= ({
    title,
    noText = 'No',
    yesText = 'Yes',
    questionText,
    onYesAction
    children
}) => {
    return (
        <React.Fragment>
            <ModalWrapper>
                <AppModalHeader toggle={toggle}>{title}</AppModalHeader>
                    <ModalBody>
                        <p>{questionText}</p>
                        <Button
                            className="float-right"
                            color="primary"
                            onClick={onYesAction}
                        >
                            {yesText}
                        </Button>
                    </ModalBody>
            </ModalWrapper>
        </React.Fragment>
    );
};

export default QuestionModal;

从“React”导入React；
从“引导”导入{ModalBody，Button，Alert}；
从“../../common/AppModalHeader”导入{AppModalHeader}；
从“/ModalWrapper”导入ModalWrapper；
常数=({
标题
noText='否'，
yesText=‘是’，
问题文本，
onYesAction
儿童
}) => {
返回(
软件工程的原则称为单一责任原则，您可以将其应用于您的组件：


模态组件负责以正确的布局显示数据，并从外部触发一些函数集，而不管传递什么数据/逻辑
此模式组件将由其他一些组件使用，这些组件的职责是在适当的时间向用户显示带有一些特定数据的模式

因此，从外部切换模态是有意义的

就我个人而言，我喜欢在只包含表示逻辑的组件中构造React应用程序，这些组件由逻辑更密集的容器（通常具有异步请求）使用

import React from 'react';
import { ModalBody, Button, Alert } from 'bootstrap';
import { AppModalHeader } from '../../common/AppModalHeader';
import ModalWrapper from './ModalWrapper';

const QuestionModal= ({
    title,
    noText = 'No',
    yesText = 'Yes',
    questionText,
    onYesAction
    children
}) => {
    return (
        <React.Fragment>
            <ModalWrapper>
                <AppModalHeader toggle={toggle}>{title}</AppModalHeader>
                    <ModalBody>
                        <p>{questionText}</p>
                        <Button
                            className="float-right"
                            color="primary"
                            onClick={onYesAction}
                        >
                            {yesText}
                        </Button>
                    </ModalBody>
            </ModalWrapper>
        </React.Fragment>
    );
};

export default QuestionModal;

import React, {useState} from 'react';
import QuestionModal from './QuestionModal'

const SomeComponent = (props) => {
  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => {
    setShowModal(!showModal);
  }

  const yesActionLogic = () => {
    // Your yes-action logic...
  }

  return (
    <div>
      {showModal ? (
        <QuestionModal
          title="Sample title",
          questionText="Question?"
          onYesAction={yesActionLogic}
        />
      ) : null}

      <Button onClick={toggleModal}>Toggle Modal</Button>

      {/* The rest of your stuff... */}
    </div>
  );
}