如何在 reactstrap v.9 (bootstrap v.5) 中使用模态？

Question

我在使用 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>

只需要访问模态状态即可显示或隐藏模态。有人有解决办法吗？

Answer 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>

非常感谢！

如何在 reactstrap v.9 (bootstrap v.5) 中使用模态？

how to use modal in reactstrap v.9 (bootstrap v.5)?

reactjs

bootstrap-4

bootstrap-modal

bootstrap-5

reactstrap