反应引导模式不显示答案

【问题标题】：React bootstrap modal doesn't show up反应引导模式不显示
【发布时间】：2020-11-14 19:25:09
【问题描述】：

无法使我的模态正常工作。一切似乎都已准备就绪。有人可以帮助我吗？一定是小事因为here 类似的设置，它的工作原理。就像我的引导程序没有加载来自 index.html。

我在 index.html 中有我的引导 js 和 css。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="root"></div>

App.js

import React, { Component } from 'react';
import './App.css';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import GroupList from './GroupList';

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path='/' exact={true} component={Home}/>
          <Route path='/groups' exact={true} component={GroupList}/>
        </Switch>
      </Router>
    )
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

GroupList.js 我的模态在哪里

   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>


<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div class="modal-body">
        Modal body..
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

【问题讨论】：

不要将 React 与任何 DOM 操作库（如 bootstrap JS）结合使用。虽然它在您链接到的 sn-p 中工作，但由于您使用 React 路由器，它不会在这里，这意味着模式并不总是在 DOM 中 - 我假设引导程序在 DOM 时设置了所有必要的事件侦听器首次加载，因此找不到按钮，因此什么也不做。虽然我从未亲自使用过它，但 React Bootstrap 库应该为您提供实现 Bootstrap 模态等的 React 组件
我推荐reactstrap，如果你喜欢上课而不是钩子

标签： javascript jquery css reactjs

【解决方案1】：

我还建议您实现“reactstrap”库。然后使用 state 来控制是否应该打开 modal。

【讨论】：