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

如何解决从React应用程序内部访问Bootstrap方法

我正在尝试在React应用中使用here中描述的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;

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

解决方法

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

从docs

我们的许多组件都需要使用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

---

您似乎想在安装组件时自动打开模式；使用React Bootstrap，您可以使用Modal组件并通过componentDidMount() { window.$(this.modal.current).modal(); } 作为true道具来轻松实现这一目标。

show

,

如果您可以选择使用其他库，我建议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 and it's JS dependencies正确加载。