React js 中的 Bootstrap 模式不起作用

Question

我正在关注本教程（ https://www.bigbinary.com/videos/keep-up-with-reactjs/creating-a-bootstrap-modal-in-react-js ）

创建一个模态，但我有这个问题。

灰色层不会让我使用模态。 我已经检查了 css 文件，但我不知道我做错了什么。

请帮我

这是我的代码：

登录.js

 import React, { Component,PropTypes } from 'react'; class Login extends React.Component { render() { return ( <div> <button type="button" id='ingresar' data-toggle="modal" data-target="#myModal"> Ingresar </button> <div className="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div className="modal-dialog"> <div className="modal-content"> <div className="modal-header"> <button type="button" className="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span className="sr-only">Close</span></button> <h4 className="modal-title" id="myModalLabel">Modal title</h4> </div> <div className="modal-body">... </div> <div className="modal-footer"> <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> <button type="button" className="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> ); } }

Answer 1

我也有同样的问题。 我发现我的问题与fade class 有关。 一旦我删除它，我的问题就解决了。

Answer 2

要在 React 中使用模式，您需要安装 react-bootstrap 引导程序 package。

npm i react-bootstrap bootstrap

安装package后的流程如下：

import Modal from "react-bootstrap/Modal";
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
   return (
     <Modal show={true}>
       <Modal.Header>Hi</Modal.Header>
       <Modal.Body>asdfasdf</Modal.Body>
       <Modal.Footer>This is the footer</Modal.Footer>
     </Modal>
   );
};