javascript - 如何在反应组件中打开引导模式?
问题描述
有一个反应组件。需要在页面加载时打开引导模式。尝试使用 jQuery 和简单的 javascript 但没有成功。
反应组件:
import React, { Component } from 'react'
import $ from 'jquery'
class Login extends Component {
componentDidMount() {
// here I want to open modal
}
render() {
return (
<div className="modal fade WelcomeModal" id="WelcomeModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header">
<div className="camera-box">
<img alt="" src="/img/yellow-logo.svg"/>
<h5 className="modal-title" id="exampleModalLabel">Welcome to the Cozy App!</h5>
</div>
</div>
<div className="modal-body">
<p className="text-center">On the following screens weʼll ask you to register the Cozys in your home & adjust your temperature settings. Youʼll need the following information:</p>
</div>
</div>
</div>
</div>
)
}
}
解决方案
看看这个codepen,它展示了如何在不需要 jQuery 的情况下将 Bootstrap 类与 React 结合起来
toggleModal = () => this.setState({
showLogin: !this.state.showLogin
})
推荐阅读
- redis - 如何知道有多少客户端连接到redis流
- java - InvalidModuleDescriptorException 导致启动层初始化时出错
- flutter - 颤振:广告未能加载:1
- z3 - Z3 如何检查模型是否满足新的断言/约束
- python - 给定一个名称列表,输出一个列表,其中仅包含包含超过 5 个字符的名称
- lightbox2 - .SVG - 文件未在 IE 中显示
- pyspark - 如何使用 UDF 在 PySpark 中合并多边形
- javascript - Cropper.js 固定图像宽度高度
- ios - 如何在不访问其开发者帐户的情况下更新客户的 iOS 应用程序?
- variables - 用于表示远程 URL 和本地文件路径的变量名称建议