Javascript 在浏览器中与reactjs一起使用引导
我正在用python进行Django项目。我正在尝试将bootstrap3.3与ReactJS一起使用。我不使用任何包管理器,因为我想在浏览器中使用ReactJS来管理几个页面,所以我简化了它 我按照以下顺序包括javascript库Javascript 在浏览器中与reactjs一起使用引导,javascript,django,html,reactjs,twitter-bootstrap-3,Javascript,Django,Html,Reactjs,Twitter Bootstrap 3,我正在用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"></sc
<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注入相同的html,但整个CSS颜色消失了
我不知道我做错了什么,有人能帮我吗
下面是代码:
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')
);
var ReactLoginForm=React.createClass({
render:function(){
返回(
在下面输入电子邮件
);
}
});
ReactDOM.render(
,
document.getElementById('loginFrm')
);
和html代码:
<div class="container">
<div id="loginFrm"></div>
</div>
尝试使用“className”作为属性,而不是“class”,因为“class”在javascript中是一个保留字,JSX基于javascript。“for”属性的情况也是如此。您必须使用“htmlFor”来代替 尝试使用'className'作为属性,而不是'class',因为'class'在javascript中是一个保留字,JSX基于javascript。“for”属性的情况也是如此。您必须使用“htmlFor”来代替 请不要包含带有代码的图像。如果你能在问题的主体中包含这些代码,那就更好了。请不要在代码中包含图像。如果你能在问题的正文中包含这些代码,那就更好了。@Hassan,不客气。如果您还没有看过它,您可能想检查一下引导。帮助您在reactjs应用程序中以更简洁的方式使用引导:@Hassan you's welcome。如果您还没有看过它,您可能想检查一下引导。帮助您以更简洁的方式在reactjs应用程序中使用引导: