從 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 依賴項正確加載。