Javascript 引导类在ReactJS组件中不起作用_Javascript_Twitter Bootstrap_Reactjs

Javascript 引导类在ReactJS组件中不起作用

javascript twitter-bootstrap reactjs

Javascript 引导类在ReactJS组件中不起作用,javascript,twitter-bootstrap,reactjs,Javascript,Twitter Bootstrap,Reactjs,我刚开始学习使用ReactJS来呈现视图，但是如果我直接将属性插入ReactJS组件中，我发现引导CSS类不能像预期的那样工作。例如，在下面的代码中，我希望生成一个包含以下类的面板：paneldefault和panelheading；但是，生成的视图不具有引导样式。如果可能的话，我想知道为什么以及如何修复。请注意，我已经编译了我的ReactJS代码，并将编译后的JS包含在HTML代码中（请参见底部） var taxonGroups={ 标识符：“ABC-x981”，资料来源：[ {segmen

我刚开始学习使用ReactJS来呈现视图，但是如果我直接将属性插入ReactJS组件中，我发现引导CSS类不能像预期的那样工作。例如，在下面的代码中，我希望生成一个包含以下类的面板：paneldefault和panelheading；但是，生成的视图不具有引导样式。如果可能的话，我想知道为什么以及如何修复。请注意，我已经编译了我的ReactJS代码，并将编译后的JS包含在HTML代码中（请参见底部）

var taxonGroups={
标识符：“ABC-x981”，
资料来源：[
{segmentName:'segment1'，长度：1090}，
{segmentName:'segment2'，长度：98}，
{segmentName:'segment3'，长度：2091}，
{segmentName:'segment4'，长度：1076}，
],
字段：[“分类单元名称”、“分类单元ID”、“分类单元源”]，
收集日期：2001-09-10
};
var Taxon=React.createClass({
render:function（）{
返回(
{this.props.data.identifier}
{
this.props.data.sources.map（函数（源）{
返回
})
}
);
}
});
var段=React.createClass({
render:function（）{
返回{this.props.name}{this.props.length}
}
});
React.render（，document.getElementById（'container'）；

HTML代码：

<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="bower_components/react/react.js"></script>
  <script src="bower_components/react/JSXTransformer.js"></script>
  <title>reactJS 3 - Rendering data with bootstrap styles</title>
</head>
<body>
<span>Is there anything?</span>

<div id="container">

</div>

<div class="panel panel-default">
  <div class="panel-heading">This is Panel Heading!</div>
  <div class="panel-body">
    This is panel body
  </div>
</div>


<script src="scripts/ReactJS/build/taxon.js"></script>
</body>
</html>


reactJS 3-使用引导样式呈现数据
有什么事吗？
这是面板标题！
这是面板主体

在React中，属性是

className

，而不是

class

。比如说，与其

<div class="panel panel-default">

你应该这样做

<div className="panel panel-default">

通过将其设置为

class

，React会忽略该属性，因此生成的HTML不包含CSS所需的类

如果您在中运行预期的HTML，这确实是您得到的结果。

我在学习React教程时遇到了类似的问题，当时我正在编写

<div classname="my bootstrap code here">

而不是

<div className="my bootstrap code here">

对于jsx，类名称应为驼峰大小写。希望这有帮助：）。

谢谢你帮我修好了。谢谢！很好的解释。

<div className="my bootstrap code here">