从 React 应用程序内部访问 Bootstrap 方法

Question

我正在尝试在 React 应用程序中使用此处描述的 Bootstrap 的.modal()方法来显示模态。 这是我运行的内容：

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.modal = React.createRef();
  }

  componentDidMount() {
    this.modal.modal()
  }

  render() {
    return (
      <div
        className="modal fade"
        ref={this.modal}
      >
        //some stuff
      </div>
    );
  }
}

export default Modal;

出于某种原因，阵营是无法访问的.modal()在this.modal ，尽管后者对象指向正确的DOM元素。 关于如何运行该方法的任何想法？

Answer 1

您必须导入一些依赖项才能使用.modal() 。

从文档

我们的许多组件都需要使用 JavaScript 才能运行。 具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。 将以下 s 放在页面末尾附近，就在结束标记之前，以启用它们。 jQuery 必须首先出现，然后是 Popper.js，然后是我们的 JavaScript 插件。

---

在index.html ，在body的结束标记之前添加以下脚本。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

然后在您的Modal组件上，将您的componentDidMount更改为

componentDidMount() {
  window.$(this.modal.current).modal();
}

---

好像是想在组件挂载时自动打开模态； 使用React Bootstrap，您可以使用Modal组件轻松实现这一点，并将true作为show prop 传递。

...
import Modal from "react-bootstrap/Modal";

class MyModal extends React.Component {
  state = {
    show: true
  };

  render() {
    return <Modal show={this.state.show} />;
  }
}

Answer 2

如果您可以选择使用另一个库，我建议使用Reactstrap，因为它有一些不错的 HoC，可以使集成变得轻而易举。

import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

const ModalExample = (props) => {
  const {
    buttonLabel,
    className
  } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

否则，请检查 Devtools 和/或您的日志以确保Bootstrap 及其 JS 依赖项正确加载。