如何在 reactstrap v.9（bootstrap v.5）中使用模态？答案

【问题标题】：how to use modal in reactstrap v.9 (bootstrap v.5)?如何在 reactstrap v.9（bootstrap v.5）中使用模态？
【发布时间】：2021-12-24 16:12:45
【问题描述】：

我在使用 Reactstrap Modal 时遇到问题 https://reactstrap.github.io/?path=/docs/components-modal--modal

在文档中它使用函数noRefCheck(){}

但我不知道如何使用该功能

<div>
  <Button
    color="danger"
    onClick={function noRefCheck(){}}
  >
    Click Me
  </Button>
  <Modal toggle={function noRefCheck(){}}>
    <ModalHeader toggle={function noRefCheck(){}}>
      Modal title
    </ModalHeader>
    <ModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </ModalBody>
    <ModalFooter>
      <Button
        color="primary"
        onClick={function noRefCheck(){}}
      >
        Do Something
      </Button>
      {' '}
      <Button onClick={function noRefCheck(){}}>
        Cancel
      </Button>
    </ModalFooter>
  </Modal>
</div>

在以前的版本中我只是使用

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

<Modal isOpen={modal}>
 <ModalHeader toggle={toggle} />
   <ModalBody className='text-center'>
      <h5 className='mb-3'>Text Example</h5>
   </ModalBody>
</Modal>

只需要访问模态状态即可显示或隐藏模态。谁有解决方案？

【问题讨论】：

我认为noRefCheck(){} 就像占位符一样。你应该用toggle函数替换它，就像你以前版本的代码一样（加上设置isOpen={modal}）。
谢谢@BřetislavHájek 我找到了解决方案。我更新了问题
@Gerry，您可以将解决方案作为单独的答案发布。不是每个人都会读 cmets！

标签： reactjs bootstrap-4 bootstrap-modal bootstrap-5 reactstrap

【解决方案1】：

我找到了解决办法使用方法和之前的版本基本一样

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

<Modal isOpen={modal}>
 <ModalHeader toggle={toggle} />
   <ModalBody className='text-center'>
      <h5 className='mb-3'>Text Example</h5>
   </ModalBody>
</Modal>

非常感谢！

【讨论】：