简体   繁体   English

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

[英]Accessing Bootstrap method from inside React app

I'm trying to use Bootstrap's .modal() method described here inside of a React app to display a modal.我正在尝试在 React 应用程序中使用此处描述的 Bootstrap 的.modal()方法来显示模态。 Here's what I'm run:这是我运行的内容:

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;

For some reason React is unable to access the .modal() in this.modal , although the latter object points to the correct DOM element.出于某种原因,阵营是无法访问的.modal()this.modal ,尽管后者对象指向正确的DOM元素。 Any ideas on how can I run that method?关于如何运行该方法的任何想法?

You have to import some dependencies to be able to use .modal() .您必须导入一些依赖项才能使用.modal()

From the docs文档

Many of our components require the use of JavaScript to function.我们的许多组件都需要使用 JavaScript 才能运行。 Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.具体来说,它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。 Place the following s near the end of your pages, right before the closing tag, to enable them.将以下 s 放在页面末尾附近,就在结束标记之前,以启用它们。 jQuery must come first, then Popper.js, and then our JavaScript plugins. jQuery 必须首先出现,然后是 Popper.js,然后是我们的 JavaScript 插件。


On your index.html add the following scripts right before your body 's closing tag.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>

Then on your Modal component, change your componentDidMount to然后在您的Modal组件上,将您的componentDidMount更改为

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

编辑 upbeat-wing-6sqxo


It seems that you want to automatically open the modal when component is mounted;好像是想在组件挂载时自动打开模态; using React Bootstrap you can easily achieve this by using theModal component and pass true as show prop.使用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} />;
  }
}

编辑sharp-bouman-ee74e

If you have the option to use another library, I suggest Reactstrap as it has some nice HoCs that will make integration a breeze.如果您可以选择使用另一个库,我建议使用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;

Otherwise, check Devtools and/or your logs to make sure Bootstrap and it's JS dependencies are loading properly.否则,请检查 Devtools 和/或您的日志以确保Bootstrap 及其 JS 依赖项正确加载。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM