React点击触发react-bootstrap Modal弹窗不显示问题排查

• 核心原因：未引入Bootstrap基础CSS。react-bootstrap 只封装了组件交互逻辑，不自带任何样式文件，Modal的固定定位、显示/隐藏状态样式、遮罩层、z-index层级规则全部依赖原生Bootstrap的CSS。没有引入CSS时，Modal节点虽然会被渲染到DOM，但默认处于隐藏/定位异常状态，自然无法出现在可视区域，且不会触发任何控制台报错。
• API使用错误：你写的parentselector属性不是react-bootstrap的Modal支持的属性：
  1. 属性名不符合React组件的小驼峰命名规范，全小写的属性不会被组件识别
  2. react-bootstrap中指定Modal挂载容器的属性是container，你混淆了react-modal等其他同类库的parentSelectorAPI，错误属性不生效会导致Modal默认挂载到当前父节点下，容易被父元素的overflow: hidden、低z-index等样式裁剪/遮挡。
• 次要隐患：控制显示状态的prop命名为isHidden，但实际传入的是代表“打开”的isOpen值，当前值传对了不影响运行，但后续维护很容易写反显示逻辑。

1. 先安装Bootstrap依赖并引入CSS
   在项目根目录执行安装命令：

   npm install bootstrap
   # 用yarn的话执行 yarn add bootstrap
   

   在项目入口文件（通常是src/index.js）或者App.js顶部引入CSS：

   import 'bootstrap/dist/css/bootstrap.min.css';
   

2. 修正TaskModal组件的错误属性，同时理顺prop命名
   修改后的TaskModal代码：

   import React from 'react';
   import { Modal, Button } from "react-bootstrap";
   
   function TaskModal(props) {
       return (
           <Modal 
               show={props.isOpen}
               onHide={props.onClose}
               container={() => document.querySelector('#root')}
           >
               <Modal.Header closeButton>
                   <Modal.Title>Translations</Modal.Title>
               </Modal.Header>
               <Modal.Body>
                   <h4>Filter:</h4>
                   <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                   <hr />
               </Modal.Body>
               <Modal.Footer>
                   <Button onClick={props.onClose}>Save</Button>
                   <Button onClick={props.onClose} variant="secondary">Close</Button>
               </Modal.Footer>
           </Modal>
       )
   }
   
   export default TaskModal;
   

3. 同步修改父组件TaskTable中调用TaskModal的传参，把之前的isHidden改为isOpen：

   <TaskModal isOpen={isOpen} onClose={hideModal}/>
   

4. 可选检查：如果自定义CSS中给.task-table、table元素设置了overflow: hidden、异常z-index属性，直接删除即可，Modal已经通过container属性挂载到root根节点，不会受父元素样式影响。

内容的提问来源于stack exchange，提问作者A.Sasori