bootstrap模态未显示在React

Question

当我单击启动演示模式按钮时，模式未显示。我已经在node.js中安装了bootstrap，并在index.js中导入它。我不知道为什么不起作用。

 import React, { useState, useEffect } from "react";
    import axios from "axios";
    function FetchLists() {
      const [data, setData] = useState([]);
      const fetch = async () => {
        try {
          const getData = await axios.get(
            "http://localhost:5000/cinephile/lists/fetch",
            {
              headers: {
                "auth-token": localStorage.getItem("auth-token"),
              },
            }
          );
    
          setData(getData.data);
        } catch (error) {
          console.log(error);
        }
      };
      useEffect(() => {
        fetch();
      }, [data]);
      return (
       <>
       
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch demo modal
    </button>
    
    
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    
       
      
       
       </>
            
          
         
        
    
          
        
      );
    }
    
    export default FetchLists;

当我单击启动演示模式按钮时，模式未显示。我已经在节点JS中安装了引导程序，并将其导入index.js。我不知道为什么不起作用。有人可以帮我解决这个问题吗？

Answer 1

中正确导入

Bootstrap CSS

和

Bootstrap JS

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

但是当您使用React时，我建议您使用React-Bootstrap中的

Modal

。 在这里，您可以找到它的详细信息：

回答bootstrapmodal

Answer 2

https：//reaectstrap.github.io/？path =/docs/components/components-modal-modal

basic示例：

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

function Example(args) {
  const [modal, setModal] = useState(false);

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

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        Click Me
      </Button>
      <Modal isOpen={modal} toggle={toggle} {...args}>
        <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 Example;

添加反应状态：

Answer 3

aadd onclick函数到按钮：

 <button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
    **onClick={() => setIsOpen(true)}**
  >
    Launch demo modal
  </button>

最终使用条件渲染来渲染模式：

**{isOpen && (**
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      ...
    </div>

如果您还想添加模态的关闭，请通过将状态设置为false将ONCLICK函数添加到关闭按钮：

 <div class="modal-footer">
     <button
      **onClick={() => setIsOpen(false)}**
      type="button"
      class="btn btn-secondary"
      data-bs-dismiss="modal"
     >
       Close
     </button>
            ...
  </div>