twitter-bootstrap Bootstrap 类在 ReactJS 组件中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27872136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap classes do not work in ReactJS component
提问by TonyGW
I just started learning to use ReactJS to render views, but I found the bootstrap CSS classes don't work as expected if I insert the attributes directly into the ReactJS components. For example, in the below code, I wish to generate a panel with the classes: panel-default and panel-heading; however, the generated view doesn't carry the bootstrap style. I was wondering why and how to fix, if possible. Please note that I've compiled my ReactJS code and included the compiled JS in the HTML code (see at the bottom).
我刚开始学习使用 ReactJS 来呈现视图，但我发现如果我将属性直接插入 ReactJS 组件中，引导 CSS 类不会按预期工作。例如，在下面的代码中，我希望生成一个具有以下类的面板：panel-default 和 panel-heading；但是，生成的视图不带有引导程序样式。如果可能的话，我想知道为什么以及如何解决。请注意，我已经编译了我的 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'));
The HTML code:
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>
回答by FeifanZ
In React, the attribute is className, not class. So for example, rather than having
在 React 中，属性是className，不是class。因此，例如，而不是拥有
<div class="panel panel-default">
You should instead have
你应该有
<div className="panel panel-default">
By setting it as class, React ignores that attribute, and as a result the generated HTML doesn't include the classes the CSS needs.
通过将其设置为class，React 会忽略该属性，因此生成的 HTML 不包含 CSS 需要的类。
If you run your expected HTML through the compiler, that is indeed what you get.
如果您通过编译器运行预期的 HTML ，这确实是您得到的。
回答by Bukunmi
I had a similar issue when following a React tutorial, i was writing
我在学习 React 教程时遇到了类似的问题，我正在编写
<div classname="my bootstrap code here">
instead of
代替
<div className="my bootstrap code here">
className should be in camel case for jsx. Hope this helps :).
jsx 的 className 应该是驼峰式的。希望这可以帮助 ：）。
