React-Bootstrap Modal点击自定义Context Menu后无法显示问题求助

• 你在alertClicked回调中直接返回Modal组件是无效的：React只会渲染render()方法返回的JSX结构，事件回调里返回的JSX不会被挂载到DOM上。
• 你没有用状态控制Modal的显示/隐藏，也没有把Modal组件放到组件的render输出结构中。
• 你当前点击菜单选项后，全局的click事件会先触发把showMenu设为false，Context Menu销毁的同时你要确保Modal的状态不会被影响。

import { Modal, ListGroup } from 'react-bootstrap';

class ContextMenu extends React.Component { 
  constructor(props){ 
    super(props); 
    this.state = { 
      xPos: "0px", 
      yPos: "0px", 
      showMenu: false,
      showModal: false // 新增控制Modal显示的状态
    } 
  } 

  componentDidMount() { 
    document.addEventListener("click", this.handleClick); 
    document.addEventListener("contextmenu", this.handleContextMenu); 
  } 

  componentWillUnmount() { 
    document.removeEventListener("click", this.handleClick); 
    document.removeEventListener("contextmenu", this.handleContextMenu); 
  } 

  handleClick = (e) => { 
    if (this.state.showMenu) this.setState({ showMenu: false }); 
  } 

  handleContextMenu = (e) => { 
    e.preventDefault(); 
    this.setState({ 
      xPos: `${e.pageX}px`, 
      yPos: `${e.pageY}px`, 
      showMenu: true, 
    }) 
  } 

  alertClicked = () => {
    // 修改状态控制Modal显示
    this.setState({
      showModal: true
    })
  }

  // 新增关闭Modal的方法
  handleCloseModal = () => {
    this.setState({
      showModal: false
    })
  }

  render() { 
    const { showMenu, yPos, xPos, showModal } = this.state;
    return (
      <>
        {/* 把Modal放到render返回的根节点下 */}
        <Modal show={showModal} onHide={this.handleCloseModal}>
          <Modal.Header closeButton>
            <Modal.Title>Modal Title</Modal.Title>
          </Modal.Header>
          <Modal.Body>弹窗内容</Modal.Body>
        </Modal>
        {showMenu && (
          <div className="menu-container" style={{ 
            top: yPos, 
            left: xPos, 
            zIndex: 9, 
            position: "absolute", 
          }}> 
            <ListGroup> 
              <ListGroup.Item action onClick={this.alertClicked}> 
                Show Modal 
              </ListGroup.Item> 
            </ListGroup> 
          </div>
        )}
      </>
    )
  } 
}

• 新增showModal状态变量专门控制Modal的显示隐藏
• 将Modal组件移到render方法的返回结构中，通过show属性绑定showModal状态
• 点击菜单选项时仅修改showModal状态为true，触发Modal渲染
• 给Modal绑定onHide方法处理关闭逻辑，修改状态为false即可隐藏弹窗

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