ReactJS调用react-bootstrap模态框点击tr行无显示无报错如何解决？

核心问题点 #

• Modal组件未挂载到当前父组件的渲染树中：你将Modal写在modalDTR函数的返回值内，但点击<tr>调用modalDTR时，返回的Modal JSX没有被插入到父组件的return渲染逻辑里，React不会渲染未在渲染树中声明的组件，因此没有弹窗也无报错。
• 函数职责混乱：modalDTR同时承担了「修改显隐状态」和「返回Modal组件」两个职能，逻辑拆分错误。
• 冗余状态：employeeInfoModalDismiss属于冗余状态，react-bootstrap的Modal设置backdrop="static"已经可以实现点击背景不关闭的效果，不需要额外状态控制。

修复后的代码示例 #

首先调整状态定义和事件处理函数：

// 仅保留控制模态框显隐的核心状态
const [employeeInfoModalShow, setEmployeeInfoModalShow] = useState(false);

// 仅负责打开模态框
const openEmployeeInfoModal = () => {
  setEmployeeInfoModalShow(true);
};

// 仅负责关闭模态框
const closeEmployeeInfoModal = () => {
  setEmployeeInfoModalShow(false);
};

const Date_columns = (props) => {
  const [hovered, setHovered] = useState(false);        

  const toggleHover = () => {
    setHovered((prevState) => !prevState);            
  }        
  
  return (
    <tr 
      onClick={openEmployeeInfoModal} 
      onMouseEnter={toggleHover} 
      onMouseLeave={toggleHover} 
      className={hovered ? classes.trHover : ''}
    >
      <td align="center" className={classes.borderBlack}>{props.date_column}</td>
      <td align="center" className={classes.borderBlack}></td>
      <td align="center" className={classes.borderBlack}></td>
      <td align="center" className={classes.borderBlack}></td>
      <td align="center" className={classes.borderBlack}></td>
      <td align="center" className={classes.borderBlack}></td>
      <td align="center" className={classes.borderBlack}></td>
      <td align="center" className={classes.borderBlack}></td>
    </tr>
  )
}

之后将Modal组件放到父组件的渲染树中，和表格同级挂载：

// 父组件return结构示例
return (
  <div>
    {/* 原有表格代码，内部渲染Date_columns组件 */}
    <table>
      <tbody>
        <Date_columns date_column="2024-01-01" />
        {/* 其余表格行 */}
      </tbody>
    </table>

    {/* Modal直接在渲染树中声明，通过show属性控制显隐 */}
    <Modal
      size="lg"
      backdrop="static"
      show={employeeInfoModalShow}
      onHide={closeEmployeeInfoModal}
      backdropClassName="modalBackdrop"
    >
      <Modal.Header closeButton></Modal.Header>
      <Modal.Body>
        <p>Test</p>
      </Modal.Body>
    </Modal>
  </div>
)

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