我刚刚开始学习使用 ReactJS 渲染 View ，但我发现如果我将属性直接插入到 ReactJS 组件中， Bootstrap CSS 类将无法按预期工作。例如，在下面的代码中，我希望生成一个具有以下类的面板: panel-default 和 panel-heading;但是，生成的 View 不带有 Bootstrap 样式。我想知道为什么以及如何解决(如果可能的话)。请注意，我已经编译了 ReactJS 代码并将编译后的 JS 包含在 HTML 代码中(请参见底部)。
var taxonGroups = {
identifier: 'ABC-x981',
sources: [
{segmentName: 'segment1', length: 1090},
{segmentName: 'segment2', length: 98},
{segmentName: 'segment3', length: 2091},
{segmentName: 'segment4', length: 1076},
],
fields: ['Taxon Name', 'Taxon ID', 'Taxon source'],
collectionDate: '2001-09-10'
};
var Taxon = React.createClass({
render: function() {
return (
<div class="panel panel-default"> <div class="panel-heading"><p>{this.props.data.identifier}</p></div>
<table class="table table-bordered table-striped table-hover">
{
this.props.data.sources.map(function(source) {
return <Segment name={source.segmentName} length={source.length}/>
})
}
</table>
</div>
);
}
});
var Segment = React.createClass({
render: function() {
return <tr><td>{this.props.name}</td><td>{this.props.length}</td></tr>
}
});
React.render(<Taxon data={taxonGroups} />, 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>
最佳答案
在React中，属性是className，而不是class。例如，而不是
<div class="panel panel-default">
你应该改为
<div className="panel panel-default">
通过将其设置为 class，React 会忽略该属性，因此生成的 HTML 不包含 CSS 所需的类。
如果您通过compiler运行您期望的HTML ，这确实是你得到的。 
关于javascript - Bootstrap 类在 ReactJS 组件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27872136/