Reactjs 以编程方式调用reactstrap模式以供重用

嗨，我想以编程方式调用reactstrap模态对象，这样我就可以重用它，并根据情况调用它。目前，我使用道具将模态状态作为道具传递，但我不想管理父级上的模态变量，以确保代码更简洁。让我解释一下我想做什么：

使用reactstrap中的基本模态示例，我正在删除该按钮，因为当单击按钮并希望动态创建模态对象时，我不会调用它。 这就是我的想法

/* Default simple reactstrap modal without button */        
/*  eslint react/no-multi-comp: 0, react/prop-types: 0 */

import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

const ModalExample = (props) => {
  const {
    buttonLabel,
    className
  } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  const onModalLoad = () => { setModal(true); }

  return (
    <div>
      <Modal isOpen={modal} toggle={toggle} className={className} onOpened={onlLoad}>
        <ModalHeader toggle={toggle}>{props.title}</ModalHeader>
        <ModalBody>
          {props.body}
        </ModalBody>
        <ModalFooter>
          <Button color="secondary" onClick={toggle}>OK</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

/*不带按钮的默认简单模式*/
/*eslint反应/无多组分：0，反应/道具类型：0*/
从“React”导入React，{useState}；
从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，ModalFooter}；
const ModalExample=（道具）=>{
常数{
按钮标签，
类名
}=道具；
const[modal，setModal]=useState（false）；
const toggle=（）=>setModal（！modal）；
const onModalLoad=（）=>{setModal（true）；}
返回(
{props.title}
{props.body}
好啊
);
}
导出默认ModalExample；

然后，我想通过调用以下命令来动态创建对象：

   const parentComponent = () => { 

const submitForm = event => {
   if (condition1) { 
      React.createElement( ModalExample, {title: 'issue1', 'this is the problem'} ); 
  }else if (condition2) { 
      React.createElement( ModalExample, {title: 'issue2', 'this is the problem'} ); 
  }else if (condition3) { 
      React.createElement( ModalExample, {title: 'issue3', 'this is the problem'} ); } 
  }
}

    return (
    <span >
   <Form onSubmit={submitForm}>
     <Button color="primary" type="submit">
         Submit
     </Button>
  </Form>
  </span> 
    )
}

constparentcomponent=（）=>{
const submitForm=事件=>{
如果（条件1）{
createElement（ModalExample，{title:'issue1'，'这就是问题'}）；
}如果（条件2）{
createElement（ModalExample，{title:'issue2'，'这就是问题'}）；
}如果（条件3）{
React.createElement（ModalExample，{title:'issue3'，'这就是问题'}）；}
}
}
返回(
提交
)
}

---

这有点类似于在链接上讨论的内容，但是这个选项并没有被完全讨论过，而且对我来说也不起作用。不确定我遗漏了什么。

您能控制它是否以编程方式显示在父级中吗？例如：

const parentComponent = () => {
  const [showModal, setShowModal] = useState(false)

return (
    <div>
        {showModal && <Modal title='my title text'  body='my title body'}/>}
        <button onClick={setShowModal(!showModal)}></button>
    </div>
      )
};

constparentcomponent=（）=>{
const[showmodel，setshowmodel]=useState（false）
返回(
{showmodel&&}
)
};

在您的示例中，您只需更改标题，因此您可以将其存储在变量中。。。无可否认，在父母身上：

   const parentComponent = () => { 
let title;    
const submitForm = event => {

   if (condition1) title = 'issue1'; 
   else if (condition2) title = 'issue2';    
   else if (condition3) title = 'issue3'; 

  }
return (
{showModal && <Modal title={title}  body='my title body'}/>}
)
}

    return (
<div>
{condition1 && <Modal title='issue1'  body='my title body'}/>}
{condition2 && <Modal title='issue2'  body='my title body'}/>}
{condition3 && <Modal title='issue3'  body='my title body'}/>}
)

constparentcomponent=（）=>{
让标题；
const submitForm=事件=>{
如果（条件1）标题为“发布1”；
如果（条件2）标题为'issue2'；
如果（条件3）标题为'issue3'；
}
返回(
{showmodel&&}
)
}

如果您绝对不想在父级上存储值，您可以在返回中包含完整的条件，但在我看来这似乎很混乱（实际上，这是父级的返回语句，因此您没有从父级中取出数据）：

返回(
{condition1&&}
{condition2&&}
{condition3&&}
)

---

这假设只有一个条件是真的-否则你可能会得到三个模态

您是否能够控制它是否以编程方式显示在父级中？例如：`const parentComponent=（）=>{const[showmodel，setshowmodel]=useState（false）返回（{showmodel&&}）`是的，但为了做到这一点，我在父级中定义了可见性设置为false的组件，并跟踪标题、主体和可见性变量。然后我将可见性切换为true/false，因为我需要根据我想要显示的内容显示/隐藏和控制文本，但我觉得这不是一个干净的解决方案，因为我在父组件中处理模式的数据和变量。如果您希望模式在不同场景中可重用，假设这可能意味着不同的标题或正文，那么您必须在某个时候将这些细节传递给它。即使在您的示例中，您可以动态创建一个元素。。。你需要在元素被调用的地方定义元素，你需要传递一些东西。我同意，这就是为什么我要传递道具为{title:'issue1'，'这是问题'}，{title:'issue2'，'这是问题'}，和{title:'issue3'，'这是问题'}，它们将填充标题和正文…我不确定我是否遵循，你能构建这个例子并向我展示条件中的内容吗？我编辑了这个问题，但基本上我不想为了使另一个组件独立，必须跟踪父组件中的showModal或任何其他变量。还要考虑可重用性，如果我想在不同的父组件中使用相同的模态组件，这不是一个很好的方法，至少我认为是这样。我不确定我处理问题的方法是否错误，但请随意评论。因此，在某个时候，您必须让家长了解模态组件。在您的示例中，您试图创建一个类型为“ModalExample”的元素——这不是一个像div一样的内置元素，因此除非您告诉您从何处调用它，否则它不会知道。还有很多重复的代码，在每个条件中调用create。我将更新我的答案以显示另一个选项