React react-bootstrap -如何从外部组件关闭模式窗口_关闭按钮不适用于react-bootstrap模式组件_从侧边栏打开内容组件中的react-bootstrap模式 - 腾讯云开发者社区

React react-bootstrap -如何从外部组件关闭模式窗口

React是一个由Facebook开发的用于构建用户界面的JavaScript库。它通过组件化的方式使得构建复杂的UI变得简单而高效。React具有高性能和灵活性，适用于单页面应用和大型Web应用的开发。

react-bootstrap是一个基于React的UI组件库，它提供了一组丰富的可重用的组件，可以帮助我们快速构建漂亮的界面。它是基于Bootstrap框架进行封装的，同时结合了React的特性，使得使用它能够更好地与React进行整合。

要从外部组件关闭模态窗口，可以使用React中的状态来控制模态窗口的显示和隐藏。以下是一个简单的示例代码：

首先，在父组件中设置一个状态来控制模态窗口的显示与隐藏：

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

function ParentComponent() {
  const [showModal, setShowModal] = useState(false);

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleShowModal = () => {
    setShowModal(true);
  };

  return (
    <>
      <Button variant="primary" onClick={handleShowModal}>
        打开模态窗口
      </Button>

      <Modal show={showModal} onHide={handleCloseModal}>
        <Modal.Header closeButton>
          <Modal.Title>模态窗口标题</Modal.Title>
        </Modal.Header>
        <Modal.Body>模态窗口内容</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            关闭
          </Button>
          <Button variant="primary" onClick={handleCloseModal}>
            保存
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default ParentComponent;

在父组件中，我们使用useState来定义一个名为showModal的状态，初始值为false。handleCloseModal函数用于关闭模态窗口，它会将showModal状态设置为false。handleShowModal函数用于打开模态窗口，它会将showModal状态设置为true。

然后，在父组件的渲染方法中，我们使用Button组件来触发打开模态窗口的动作，并使用Modal组件来创建模态窗口。通过设置Modal组件的show属性来控制模态窗口的显示与隐藏，当show为true时，模态窗口显示，当show为false时，模态窗口隐藏。在Modal组件中，我们通过设置onHide属性为handleCloseModal函数，使得点击模态窗口上的关闭按钮时，模态窗口会自动调用handleCloseModal函数来关闭。

这样，我们就可以在外部组件中通过调用父组件的关闭模态窗口的函数来关闭模态窗口。

关于React和react-bootstrap的更详细的介绍和使用方法，您可以参考以下链接：