如何使用Reactstrap v9（对应Bootstrap v5）的Modal组件？

noRefCheck函数说明 #

文档示例里的noRefCheck(){}没有任何实际业务功能，是官方用Storybook生成演示代码时自动填充的占位空函数，仅用来补全组件的必填属性占位值，不是要求开发者必须实现的方法，开发时直接替换成自己的事件处理函数即可。

新版本Modal组件正确使用方式 #

Reactstrap v9+的Modal组件完全兼容旧版的状态控制逻辑，和你之前的写法差异很小，仅需要补全官方新增的必填toggle属性即可：

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

function MyModalDemo() {
  // 状态控制逻辑和旧版完全一致
  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        打开弹窗
      </Button>
      {/* 仅需要新增toggle属性传入状态切换函数即可 */}
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>弹窗标题</ModalHeader>
        <ModalBody className='text-center'>
          <h5 className='mb-3'>Text Example</h5>
          自定义弹窗内容
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>确认</Button>
          {' '}
          <Button onClick={toggle}>取消</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

• 原有的isOpen属性依然是控制弹窗显隐的核心，不需要修改原有状态逻辑
• toggle属性接收状态切换函数后，点击弹窗蒙层、右上角关闭按钮时会自动调用该函数，不需要额外绑定事件
• 所有示例中出现的noRefCheck直接替换为自己的业务处理函数即可，不需要保留

内容的提问来源于stack exchange，提问作者Gerry