问react -使用Bootstrap4 CDN，如何在React中手动启用javascript事件处理程序？
EN

Stack Overflow用户

提问于 2018-11-15 05:47:59

回答 2查看 215关注 0票数 1

我已经在网上逛了一段时间了，一点希望也没有。

我使用“折叠”引导来切换div的可见性。

我需要通过react来控制这个切换。引导程序说可以通过"$('.collapse').collapse()“访问，但是由于某种原因，除了导入jQuery或使用react引导组件之外，我不能在react.....any建议中这样做？

class Container extends Component {
  render() {
   return (

     <div className="wrapper">

          <div className="collapse in" id="collapseExample">
           <h1>Hide me</h1>
          </div>

          <div className="container">
           <div className="row">
             <button
              data-toggle="collapse"
              data-target="#collapseExample"
              aria-expanded="false"
              aria-controls="collapseExample">
              Get a random Book
            </button>
          </div>
         </div>

    </div>

)}

bootstrap-4

javascript

reactjs

Stack Overflow用户

发布于 2018-11-15 07:01:32

下面的代码片段说明了应该如何完成该操作。如果它在您的程序中仍然不能正常工作，我将验证CDN脚本链接是正确的。

提示，在ReactJS中，我们不应该使用jQuery来操作虚拟DOM，而是通过组件来操作。

// Example stateless functional component
const SFC = props => (
  <div>{props.label}</div>
);

// Example class component
class Container extends React.Component {
  render() {
     return (

       <div className="wrapper">

            <div className="collapse" id="collapseExample">
             <h1 className="card card-body">Hide me</h1>
            </div>

            <div className="container">
             <div className="row">
               <button className="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Get a random book</button>
            </div>
           </div>

      </div>
  ) }
}

// Render it
ReactDOM.render(
  <Container/>,
  document.getElementById("react")
);

<div id="react"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

票数 0

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53313167

复制

相似问题

问react -使用Bootstrap4 CDN，如何在React中手动启用javascript事件处理程序？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react -使用Bootstrap4 CDN，如何在React中手动启用javascript事件处理程序？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react -使用Bootstrap4 CDN，如何在React中手动启用javascript事件处理程序？
EN