Menu
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).
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>
<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>
303
In React, the attribute is className, not class. So for example, rather than having
<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.
If you run your expected HTML through the compiler, that is indeed what you get.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
