我正在使用 python 开发 Django 项目。我正在尝试将 bootstrap3.3 与 ReactJS 一起使用。我不使用任何包管理器,因为我想在浏览器中使用 ReactJS 几个页面,所以我让它变得简单。
我按以下顺序包含 javascript 库
<script src="/static/jquery/3.1.0/jquery.min.js"></script>
<script src="/static/react/15.3.0/react.min.js"></script>
<script src="/static/react-dom/15.3.0/react-dom.min.js"></script>
<script src="/static/babel-standalone/6.12.0/babel.min.js"></script>
<script src="/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/bootstrap/3.3.7/css/bootstrap.min.css">
现在,在我的 app/template/app 文件夹中,我创建 login.html 并使用 bootstrap 编写一些 html,如下所示:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Enter email below</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
</div>
<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
我的页面上有漂亮的形式
现在我尝试通过 ReactJS 注入(inject)相同的 html,但整个 CSS 着色消失了
我不知道我做错了什么,有人可以帮助我吗?
以下是ReactJS代码:
var ReactLoginForm = React.createClass({
render: function() {
return (
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Enter email below</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
</div>
<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
</fieldset>
</form>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<ReactLoginForm />,
document.getElementById('loginFrm')
);
和 html 代码:
<div class="container">
<div id="loginFrm"></div>
</div>
最佳答案
尝试使用“className”作为属性而不是“class”,因为“class”是 javascript 中的保留字,而 JSX 是基于 javascript 的。 'for' 属性的情况也是如此。您必须使用“htmlFor”来代替。
关于javascript - 在浏览器中使用 Bootstrap 和 ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38806765/