我跟随ReactJS教程学习,它非常简单易懂,可以完成更复杂的任务。
在我的情况下,我想使用一个包含地图、单个值、列表等的复杂JSON对象。以下是代码:
var NotificationStatus = React.createClass({
loadNotificationsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
console.log(this.state.data.notificationType);
}.bind(this)
});
},
getInitialState: function() {
return {data: {}};
},
componentWillMount: function() {
this.loadNotificationsFromServer();
setInterval(this.loadNotificationsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div>
<li className="dropdown-menu-title">
<span>You have {this.state.data.notificationCount} notifications</span>
</li>
<Notifications data={this.state.data.notificationType} />
</div>
);
}
});
var Notifications = React.createClass({
render: function() {
var notificationNodes = this.props.data.map(function (notif, index) {
return <Notification key={index}>{notif.type}</Notification>;
});
return <li>{notificationNodes}</li>;
}
});
var Notification = React.createClass({
render: function() {
return (
<a href="#">
<span className="icon blue"><i className={this.props.children == "user" ? 'icon-user' : 'icon-comment-alt'}></i></span>
<span className="message">{this.props.children}</span>
<span className="time">1 min</span>
</a>
);
}
});
React.renderComponent(
<NotificationStatus url="/data/notifications.json" pollInterval={2000} />,
document.getElementById('notificationbar')
);
以下是JSON的示例:
{
"notificationCount": "1",
"notificationType": [
{
"type": "update",
"text": "New Update"
},
{
"type": "user",
"text": "New User"
}
]
}
当我尝试获取通知类型时,此处会引发错误“this.props.data未定义”。
var notificationNodes = this.props.data.map(function (notif, index) {
我真的看不出声明有什么问题,当我在ajax层获取JSON时,确实有一个映射表(通过console.log验证)。
任何帮助都将是极好的。
非常感谢。