以编程方式调用 reactstrap 模态以进行重用

Question

您好，我想以编程方式调用 reactstrap 模态对象，以便我可以重用它并根据情况调用它。目前，我通过使用 props buy 将模态状态作为道具传递，但我不想在父级上管理模态变量以确保我的代码更干净。让我解释一下我想做什么：

使用 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;

然后我想通过调用类似的东西来动态创建对象：

   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> 
    )
}

这有点类似于链接How to open/close react-bootstrap modal programmatically? 上讨论的内容，但这个选项没有被充分讨论，它对我不起作用。不知道我错过了什么。

Answer 1

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

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>
      )
};

在您的示例中，您只是更改了标题，因此您可以将其存储在一个变量中...诚然在父级上：

   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'}/>}
)

这假设只有一个条件为真 - 否则您最终可能会得到三个模态！