react -使用Bootstrap4 CDN，如何在React中手动启用javascript事件处理程序？
我已经在网上逛了一段时间了，一点希望也没有。
我使用“折叠”引导来切换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>)}
回答 2
Stack Overflow用户
发布于 2018-11-15 07:28:25
引导javascript依赖于jQuery。jQuery和React有不同的方式来操作DOM。为了避免将来出现问题，您不应该同时使用这两种方法。如果您正在使用React，反应思维是很重要的。
Bootstrap的一个很好的反应包装是反应带。我建议您使用库来构建基于引导程序的组件，而不是编写引导程序的原始类。名为Collapse的组件可能适合您的需要，正如您在示例代码这里中看到的那样。
如果您根本不想导入任何库，那么使用state编写组件非常简单。内部想法类似于上面的Collapse示例代码：
class MyCollapse extends Component {
state = {
isOpen: false
};
toggleState = () => this.setState( prevState => ({ isOpen: !prevState.isOpen }));
render() {
return (
<div>
<button onClick={this.toggleState}>Click to toggle</button>
{
this.state.isOpen &&
<div className="my-collapse">
{/* COLLAPSE CONTENT */}
</div>
}
</div>
)
};
}每次单击该按钮时，状态属性isOpen都会被切换，这将导致组件的重新呈现。这是反应的最大力量之一:非常灵活。
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>
https://stackoverflow.com/questions/53313167
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号