6
Tôi đang cố tách riêng mọi thành phần thành một tệp riêng biệt để có mô đun tốt hơn. Mặc dù tôi đã bao gồm tập tin jsx thành phần trên trang index tôi vẫn đang nhận được Uncaught ReferenceError: TopicsList is not definedCách tách các thành phần js phản ứng thành nhiều tệp
Dưới đây là các mã:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React.js Demo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="//fb.me/react-0.14.5.js"></script>
<script src="//fb.me/react-dom-0.14.5.js"></script>
<script src="//fb.me/JSXTransformer-0.12.2.js"></script>
<script src="../components/layout.jsx" type="text/jsx"></script>
<script src="../components/topic-list.jsx" type="text/jsx"></script>
</head>
<body>
<div id="main-container"></div>
</body>
</html>
layout.jsx
"use strict";
var Layout = React.createClass({
render: function() {
return (
<div className="container">
<TopicsList />
</div>
);
}
});
ReactDOM.render(<Layout />, document.getElementById('main-container'));
topic-list.jsx
"use strict";
var TopicsList = React.createClass({
getInitialState: function() {
return {
isTopicClicked : false,
topicPages
};
},
onClick: function (topicID) {
this.setState({isTopicClicked : true});
this.setState({topicsID : topicID});
},
render: function() {
return (
<div>
<div className="row topic-list">
<SingleTopicBox
topicID="1"
onClick={this.onClick}
label="Topic"
/>
<SingleTopicBox
topicID="2"
onClick={this.onClick}
label="Topic"
/>
<SingleTopicBox
topicID="3"
onClick={this.onClick}
label="Topic"
/>
<SingleTopicBox
topicID="4"
onClick={this.onClick}
label="Topic"
/>
</div>
<div className="row">
{ this.state.isTopicClicked ? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages} /> : null }
</div>
</div>
);
}
});
var SingleTopicBox = React.createClass({
render: function() {
return (
<div>
<div className="col-sm-2">
<div onClick={this.props.onClick.bind(null, this.props.topicID)} className="single-topic" data-topic-id={this.props.topicID}>
{this.props.label} {this.props.topicID}
</div>
</div>
</div>
);
}
});
var topicPages = [
{
topic_no: '1',
topic_pages: [
{
headline: 'Topic 1 headline',
description: 'Topic 1 description comes here...page 1'
},
{
headline: 'Topic 1 headline',
description: 'Topic 1 description comes here...page 2'
},
{
headline: 'Topic 1 headline',
description: 'Topic 1 description comes here...page 3'
}
]
},
{
topic_no: '2',
topic_pages: [
{
headline: 'Topic 2 headline',
description: 'Topic 2 description comes here...page 1'
},
{
headline: 'Topic 2 headline',
description: 'Topic 2 description comes here...page 2'
},
{
headline: 'Topic 2 headline',
description: 'Topic 2 description comes here...page 3'
}
]
},
{
topic_no: '3',
topic_pages: [
{
headline: 'Topic 3 headline',
description: 'Topic 3 description comes here...page 1'
},
{
headline: 'Topic 3 headline',
description: 'Topic 3 description comes here...page 2'
},
{
headline: 'Topic 3 headline',
description: 'Topic 3 description comes here...page 3'
}
]
},
{
topic_no: '4',
topic_pages: [
{
headline: 'Topic 4 headline',
description: 'Topic 4 description comes here...page 1'
},
{
headline: 'Topic 4 headline',
description: 'Topic 4 description comes here...page 2'
},
{
headline: 'Topic 4 headline',
description: 'Topic 4 description comes here...page 3'
}
]
},
];
var SelectedTopicPage = React.createClass({
getInitialState: function() {
return{
topicPageNo: 0,
total_selected_topic_pages: 1
}
},
navigateBack: function() {
let topicPageNo;
if (this.state.topicPageNo > 0){
topicPageNo = this.state.topicPageNo - 1;
}
else {
topicPageNo = 0;
}
this.setState({topicPageNo : topicPageNo});
},
navigateNext: function(totalPagesInSelectedTopic) {
let topicPageNo;
if (totalPagesInSelectedTopic > this.state.topicPageNo + 1){
topicPageNo = this.state.topicPageNo + 1;
}
else {
topicPageNo = this.state.topicPageNo;
}
this.setState({topicPageNo : topicPageNo});
},
render: function() {
let topicsID = this.props.topicsID;
let topicPageNo = this.state.topicPageNo;
return (
<div>
{this.props.topicPages.filter(function(topicPage) {
// if condition is true, item is not filtered out
return topicPage.topic_no === topicsID;
}).map(function (topicPage) {
let totalPagesInSelectedTopic = topicPage.topic_pages.length;
return (
<div>
<div>
<SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}>
{topicPage.topic_pages[topicPageNo].description}
</SelectedTopicPageMarkup>
</div>
<div>
<NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack}/>
</div>
</div>
);
}.bind(this))}
</div>
);
}
});
var SelectedTopicPageMarkup = React.createClass({
render: function() {
return (
<div className="topics-page">
<h1>{this.props.headline}</h1>
<p>{this.props.children}</p>
</div>
);
}
});
var NextPrevBtn = React.createClass({
render: function() {
return (
<div className="next-prev-btn">
<a onClick={this.props.moveBack} className="btn prev-btn">Back</a>
<a onClick={this.props.moveNext} className="btn next-btn">Next</a>
</div>
);
}
});
Dis bạn cố gắng định vị Tập tin 'TopicsList' trước' layout' trong 'index.html' nơi bạn nạp' '? –
vì lý do đó 'TopicsList' cần được tải trước, sau đó' Layout' sẽ biết về nó. Dù sao tôi cũng đề nghị một hệ thống bundler như [Gulp] (http://gulpjs.com/) hoặc [Webpack] (https://webpack.github.io/) –