下面是我的路由器和视图代码，我也尝试从视图中返回普通文本，但仍然没有渲染。
Router.js
require('../../utils/ensure-https.js');
import styles from '../../../static/stylesheets/app/dashboard.css';
import {Header} from '../common/header-view.js';
import DashBoardView from './components/dashboard-view.js';
import UserInformationView from './components/user-information-view.js';
var Router = ReactRouter.Router;
var Link = ReactRouter.Link;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var wrapComponent = function(Component, props) {
return React.createClass({
render() {
return React.createElement(Component, props);
}
});
};
var routes = (
<Router history={ReactRouter.browserHistory}>
<Route path="/" component = {wrapComponent(Header,{activeTab: 'dashboard'})}>
<IndexRoute component={DashBoardView}/>
<Route path="/user-information" component = {UserInformationView}/>
</Route>
</Router>
);
ReactDOM.render(routes, document.getElementById("wrapper"));
仪表板view.js
import {latas} from '../../common/header-view.js';
import ClassSet from '../../../mixins/class-set-mixin.js';
var DashBoardView = React.createClass({
mixins: [ReactRouter.Navigation, ClassSet],
render: function() {
return (
<div>
<div className={socketDisconnectClass}>
<p>Socket has been disconnected. Please refresh or click <a href="javascript:void(0);" onClick={this.reloadDashboard}>here</a> </p>
</div></div>
);
} });
export default DashBoardView;
页眉view.js
import ClassSet from '../../mixins/class-set-mixin.js';
import SessionStore from '../../stores/SessionStore.js';
import InterruptionStore from '../../stores/InterruptionStore.js';
import Authorization from '../../mixins/access-mixin.js';
import DateFormatterMixin from '../../mixins/date-formatter-mixin.js';
import CommonActions from '../../mixins/common-mixin.js';
import MapLayers from '../common/map-layers-view.js';
var latas = {};
var Header = React.createClass({
mixins: [ReactRouter.Navigation, ClassSet, Authorization, DateFormatterMixin, CommonActions],
getDefaultProps: function() {
return {
activeTab: 'dashboard'
};
},
getInitialState: function() {
return {
displayUserMenu: false,
toggleMenu: false,
displayAdminMenu: false,
toggleAdminMenu: false,
notifications: [],
map: null
};
},
goToUserProfile: function() {
location.href='dashboard.html#/user-information'
},
goToApiDoc: function () {
location.href='/apiDocumentation.html'
},
gotoPrivacyPolicy: function () {
window.open('dashboard.html#/privacypolicy', '_newtab')
},
goToApiUsers: function () {
location.href='userManagement.html#/api-userlisting'
},
componentWillMount: function() {
this.access_token = SessionStore.getAccessToken();
if(!this.access_token) {
location.href = '/';
} else {
this.canAccess = this.checkForAccess();
if(!this.canAccess) {
location.href = '/dashboard.html';
}
}
latas.setMap = function(map, flightCallback) {
this.setState({
map: map,
toggleFlightLayer: flightCallback
});
}.bind(this);
latas.setLayersViewState = function() {
this.refs.mapLayers.setState(this.refs.mapLayers.state);
}.bind(this)
},
isValidIe: function () {
if(navigator.appVersion.indexOf("MSIE") != -1 && parseFloat(navigator.appVersion.split("MSIE")[1]) <= 9) {
return false;
}
return true;
},
checkForAccess: function() {
var canAccess = true;
var activeTab = this.props.activeTab;
if(activeTab === 'geofence') {
canAccess = this.canAccessGeofenceManagement();
}
else if(activeTab === 'user') {
canAccess = this.canAccessUserManagement();
}
else if(activeTab === 'user') {
canAccess = this.canAccessApiUserManagement();
}
return canAccess;
},
componentWillUnmount: function() {
$(window).unbind('scroll');
},
componentDidMount: function() {
latas.setNotification = function(notifications) {
this.setState({
notifications: notifications
});
}.bind(this);
},
showMenu: function(e) {
e.stopPropagation();
var displayUserMenu = this.state.displayUserMenu;
this.setState({
displayUserMenu: !displayUserMenu,
displayNotificationMenu: false,
displayAdminMenu: false,
toggleMenu: !this.state.toggleMenu
});
},
showAdminMenu: function(e) {
e.stopPropagation();
var displayAdminMenu = this.state.displayAdminMenu;
this.setState({
displayAdminMenu: !displayAdminMenu,
displayNotificationMenu: false,
displayUserMenu: false,
toggleAdminMenu: !this.state.toggleAdminMenu
});
},
gotoNotifications: function(e) {
this.transitionTo('notification');
},
showNotifications: function(e){
e.stopPropagation();
var displayNotificationMenu = this.state.displayNotificationMenu;
this.setState({
displayNotificationMenu: !displayNotificationMenu,
displayUserMenu: false,
displayAdminMenu: false
});
},
logOutUser: function() {
SessionStore.removeUserSession();
InterruptionStore.removeUserInterruption();
location.href = '/';
},
resetDropdown: function() {
this.setState({
displayNotificationMenu: false,
displayUserMenu: false,
toggleMenu: false,
toggleAdminMenu: false,
displayAdminMenu: false
});
},
getNotifications: function() {
var notificationArray = _.values(this.state.notifications);
notificationArray.sort(function(notification1, notification2) {
return notification2.time - notification1.time;
});
return _.map(notificationArray, function(notification) {
var notificationTime = this.formatTimeTohhmmtt(new Date(notification.time));
var iconClassDrone = notification.notificationType === 1 ? 'icon-droneAlert pull-left' : 'icon-lowBattery pull-left';
var iconClassWarning = notification.notificationType === 1 ? 'icon-alert pull-left' : 'icon-alertBattery pull-left';
var messageClass = notification.notificationType === 1 ? 'dangerZone' : 'batteryLow';
return (
<li className="clearfix new">
<i className={iconClassDrone}></i>
<div className="droneNameId pull-left">
<a href="javascript:void(0);">{notification.droneName}</a>
<span className="droneIds clearfix"><span className="notifyHeaderIdDrone pull-left">ID :</span><span className="notifyHeaderDroneId pull-left">{notification.droneId}</span></span>
</div>
<i className={iconClassWarning}></i>
<div className="droneInfoWarning pull-left">
<span>{notificationTime}</span>
<span className="weakSignal">{notification.message}</span>
</div>
<div className="read pull-right"></div>
</li>
);
}.bind(this));
},
mapLayerList: function() {
if(this.props.activeTab ==='dashboard' && this.context.router.getCurrentPathname()==='/') {
return <MapLayers ref="mapLayers" map={this.state.map} toggleFlightLayer={this.state.toggleFlightLayer}/>;
}
},
render: function() {
if(!this.access_token || !this.canAccess) {
return <div></div>;
}
var notificationList = this.getNotifications();
var activeTab = this.props.activeTab;
var userSessionData = SessionStore.getUserSession();
if(userSessionData) {
this.fullName = userSessionData.name || '';
this.userName = this.fullName.substring(0,25);
this.email = userSessionData.email;
}
var legendMapLayers = this.mapLayerList();
var menuClass = this.getClassSet({
userProfileCmpny: true,
hide: !this.state.displayUserMenu
});
var toggleMenuClass = this.getClassSet({
userId: true,
clearfix: true,
active: this.state.toggleMenu
});
var adminCntClass = this.getClassSet({
adminMenu: true,
hide: !this.state.displayAdminMenu
});
var adminMenuClass = this.getClassSet({
adminMenuWrap: true,
clearfix: true,
toggleArrow: this.state.toggleAdminMenu,
active: activeTab === 'organization' || activeTab === 'geofence',
hide: !this.canAccessOrganizationManagement()
});
var notificationDropdownClass = this.getClassSet({
notificationList: true,
hide: !this.state.displayNotificationMenu
});
var notificationMenuClass = this.getClassSet({
notification: true,
hide: activeTab !== 'dashboard'
});
var footerClass = this.getClassSet({
secureFooter: true,
dashboardActive: activeTab === 'dashboard' && this.context.router.getCurrentPathname()==='/'
});
var dashboardClass = this.getClassSet({
mainMenuLink: true,
active: activeTab === 'dashboard'
});
var airspaceClass = this.getClassSet({
mainMenuLink: true,
active: activeTab === 'airspace'
});
var dronesClass = this.getClassSet({
mainMenuLink: true,
active: activeTab === 'drone'
});
var reportsClass = this.getClassSet({
mainMenuLink: true,
active: activeTab === 'reports'
});
var geofenceClass = this.getClassSet({
active: activeTab === 'geofence',
hide: !this.canAccessGeofenceManagement()
});
var userMClass = this.getClassSet({
mainMenuLink: true,
active: activeTab === 'user',
hide: !this.canAccessUserManagement()
});
var organizationClass = this.getClassSet({
active: activeTab === 'organization',
hide: !this.canAccessOrganizationManagement()
});
var apiuserClass = this.getClassSet({
active: activeTab === 'user',
hide: !this.canAccessApiUserManagement()
});
var adminClass = this.getClassSet({
active: activeTab === 'organization' || activeTab === 'geofence',
hide: !this.canAccessOrganizationManagement()
});
var notificationCount = _.keys(this.state.notifications).length;
var notificationCountClass = this.getClassSet({
notifyCount: true,
hide: (!notificationCount)
});
var browserValidationClass = this.getClassSet({
upgradeBrowser: true,
hide: this.isValidIe()
});
var browserNotIe = this.getClassSet({
loggedInWrap: true,
hide: !this.isValidIe()
});
var year = new Date();
var currentYear = year.getFullYear();
var hideAPIDocumentationClass = this.getClassSet({
hide: this.canNotAccessApiDocumentation()
});
return (
<div>
<div className={browserValidationClass}>
<div className="upgradeheader nonSecureWrap">
<div className="container">
<h1>
<a className="logo" href="/"></a>
</h1>
</div>
</div>
<div className="content container">
<div className="upgradeImage">
<img src="/assets/image/browserupdate.png" alt="Upgrade your browser"/>
</div>
<div>
<h2>Oops!</h2>
<span className="browserNotSupported"> Your browser is currently not supported.</span>
</div>
<p>
<a href="http://www.microsoft.com/en-us/download/internet-explorer.aspx" target="_blank">Click here</a>
<span> to update your browser to higher level!</span>
</p>
</div>
</div>
<div onClick={this.resetDropdown} className={browserNotIe}>
<header>
<div className="container">
<div className="row">
<div className="col-xs-2 clearfix">
<h1>
<a className="logo" href="/"></a>
</h1>
</div>
<ul className="col-xs-7 mainNav clearfix">
<li className={dashboardClass}>
<a href="/dashboard.html">Dashboard</a>
</li>
<li className={airspaceClass}>
<a href="/flightReservation.html">Air Space</a>
</li>
<li className={dronesClass}>
<a href="/droneManagement.html">Drones</a>
</li>
<li className={userMClass}>
<a href="/userManagement.html">Users</a>
</li>
<li className={reportsClass}>
<a href="/reportManagement.html">Reports</a>
</li>
<li className={adminMenuClass} onClick={this.showAdminMenu}>
<a href="javascript:void(0);">
<span>Admin</span>
<i className="userMenuicon"></i>
</a>
<ul className={adminCntClass}>
<li className={geofenceClass}>
<a href="/geofenceManagement.html">Geo-fences</a>
</li>
<li className={organizationClass}>
<a href="/organizationManagement.html">Organizations</a>
</li>
<li className={apiuserClass}>
<a href="javascript:void(0);" onClick={this.goToApiUsers}>API Users</a>
</li>
</ul>
</li>
</ul>
<div className="col-xs-3 clearfix">
<div className={notificationMenuClass} onClick={this.showNotifications}>
<i className="icon-notify"></i>
<div className={notificationCountClass}>
<span className="notifyCnt">{notificationCount}</span>
</div>
<div className={notificationDropdownClass}>
<div className="heading">
<h4>Notifications</h4>
</div>
<ul className="notifyContent">
{notificationList}
</ul>
<div className="showMoreNotify hide">
<a href="javascript:void(0);" onClick={this.gotoNotifications}>Show more Notifications</a>
</div>
</div>
</div>
<div className={toggleMenuClass} onClick={this.showMenu}>
<i className="icon-userDefault"></i>
<span title={this.fullName}>{this.userName}</span>
<a className="menuIconWrap" href="javascript:void(0);">
<i className="userMenuicon"></i>
</a>
<ul className="userOptions hide">
<li>
<a href="javascript:void(0);">Profile</a>
</li>
<li>
<a href="javascript:void(0);">Account</a>
</li>
<li>
<a href="javascript:void(0);">Logout</a>
</li>
</ul>
<div className={menuClass}>
<div className="userCmpnyName clearfix">
<span>{this.email}</span>
<div className="clearfix settingsWrap">
<a onClick={this.goToUserProfile} href="javascript:void(0);" className="baseBtn secondaryBtn transEffect pull-left">Profile</a>
<a href="javascript:void(0);" className="pull-left primaryLink" onClick={this.logOutUser}>Logout</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
{this.props.children}
<footer className={footerClass}>
<div className="clearfix">
{legendMapLayers}
<div className="secureFooterWrap">
<div className="copyrightWrap">
<span className="copyright">© LATAS {currentYear}. </span>
<span className="rightsReserved">All rights reserved.</span>
</div>
<ul className="footerLinks">
<li className="privacyPolicy">
<a href="javascript:void(0);" onClick={this.gotoPrivacyPolicy}>Privacy Policy</a>
</li>
<li className={hideAPIDocumentationClass}>
<a href="javascript:void(0);" onClick={this.goToApiDoc}>API Documentation</a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
)}
});
export {Header,latas};
我只想知道为什么代码呈现空页。