22
Tôi mới bắt đầu học cách sử dụng ReactJS để hiển thị các khung nhìn, nhưng tôi thấy các lớp CSS bootstrap không hoạt động như mong đợi nếu tôi chèn các thuộc tính trực tiếp vào các thành phần ReactJS. Ví dụ, trong đoạn mã dưới đây, tôi muốn tạo một panel với các lớp: default-panel và panel-heading; tuy nhiên, khung nhìn được tạo ra không mang kiểu bootstrap. Tôi đã tự hỏi tại sao và làm thế nào để sửa chữa, nếu có thể. Xin lưu ý rằng tôi đã biên dịch mã ReactJS của mình và bao gồm JS được biên dịch trong mã HTML (xem ở dưới cùng).Các lớp Bootstrap không hoạt động trong thành phần ReactJS
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'));
Các 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>
Cảm ơn điều này đã khắc phục sự cố cho tôi. – CoryCowgill
Cảm ơn bạn đã giải thích. Chỉ cần một phép thuật khác: ( – haotang
Cảm ơn bạn! –