React-Bootstrap 2022：点击X关闭按钮模态框无法关闭

你的模态框关闭按钮点击无响应，核心存在三个问题：

1. React组件参数传递错误 #

MessageBoxComponent被定义为接收单独参数的普通函数，但React组件的第一个参数必须是props对象。当前写法下，你传入的closeCallback根本没被正确传递到Modal的onHide属性中，导致点击关闭按钮时没有执行任何逻辑。

2. 状态初始值类型错误 #

showState的初始值设为空字符串""，但React-Bootstrap的Modal组件show属性要求布尔值。初始类型不匹配会导致状态更新后组件渲染异常。

3. 组件实例化方式错误 #

在useMessageBox中直接调用MessageBoxComponent()生成组件实例，不符合React的组件渲染逻辑，会导致状态更新无法正确触发组件重渲染。

修复后的代码： #

MessageBox.js

import Modal from 'react-bootstrap/Modal'
import { useState } from 'react'

// 修正组件参数为props对象
function MessageBoxComponent({ title, content, showState, closeCallback }) {
    return (
        <Modal show={showState} onHide={closeCallback}>
            <Modal.Header closeButton>
                <Modal.Title>{title}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                {content}
            </Modal.Body>
        </Modal>
    )
}

function useMessageBox(closeCallback = () => {}) {
    // 修正初始值为布尔值false
    const [showState, setShowState] = useState(false)
    const [title, setTitle] = useState("")
    const [content, setContent] = useState("")

    const showMessageBox = (title, content) => {
        setTitle(title)
        setContent(content)
        setShowState(true)
    }

    const closeMessageBox = () => {
        setShowState(false)
        // 执行传入的自定义关闭回调
        closeCallback()
    }

    // 返回JSX元素，符合React渲染逻辑
    const component = <MessageBoxComponent 
        title={title} 
        content={content} 
        showState={showState} 
        closeCallback={closeMessageBox} 
    />

    return [component, showMessageBox, closeMessageBox]
}

export default useMessageBox

example.js（无需修改）

import useMessageBox from '../Utils/MessageBox'

function MessageBoxExample(){
    const [messageBoxComponent, showMessageBox, closeMessageBox] = useMessageBox()
    const handleClick = (evt) => {
        showMessageBox("This is the title",<span>This is the body</span>)
    }
    return <>
        <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-12'>
                    <button className='btn btn-primary' onClick={handleClick}>Open Message Box</button>
                </div>
            </div>
        </div>
        {messageBoxComponent}
        </>
}

额外说明： #

• 修复参数传递后，点击关闭按钮会触发closeMessageBox，更新showState为false从而关闭模态框。
• 若需自定义关闭逻辑，可在调用useMessageBox时传入回调，例如：

  const [messageBoxComponent, showMessageBox, closeMessageBox] = useMessageBox(() => {
      console.log("模态框已关闭")
  })
  

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