Javascript react iscroll自升级到react 0.14.3后生成警告和错误
我用的是卷轴。在我将react升级到版本0.14.3之前,它工作正常。升级react版本后,我不得不将其他几个库更新为最新版本,即: 反应路由器组件 反应自举 react插件纯渲染混合 我还必须添加一个dom 我必须用reactdom.render替换任何react.render语句,并删除react.initializeTouchEvents(true)语句 现在,当jsx文件中的render方法尝试按如下方式呈现react scroll组件时,我收到一条警告和错误: 警告:React.createElement:类型不应为null、未定义、布尔值或数字。它应该是字符串(对于DOM元素)或ReactClass(对于复合组件)。检查Javascript react iscroll自升级到react 0.14.3后生成警告和错误,javascript,reactjs,Javascript,Reactjs,我用的是卷轴。在我将react升级到版本0.14.3之前,它工作正常。升级react版本后,我不得不将其他几个库更新为最新版本,即: 反应路由器组件 反应自举 react插件纯渲染混合 我还必须添加一个dom 我必须用reactdom.render替换任何react.render语句,并删除react.initializeTouchEvents(true)语句 现在,当jsx文件中的render方法尝试按如下方式呈现react scroll组件时,我收到一条警告和错误: 警告:React.cre
页面
的渲染方法
未捕获错误:不变冲突:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:对象。检查页面的呈现方法
var React = require('react');
var IScroll = require('iscroll/build/iscroll-probe');
var ReactIScroll = require('react-iscroll');
var AppStore = require('../../stores/app-store');
var Timeline = require('../timeline/timeline.jsx');
var Vehicles = require('../vehicles/vehicles.jsx');
var SlotsDepartment = require('./slots-department.jsx');
var AppConstants = require('../../constants/app-constants');
var AppWatchMixin = require('../../mixins/AppWatchMixin');
var AppActions = require('../../actions/app-actions');
var PureRenderMixin = require('react-addons-pure-render-mixin');
var Immutable = require('immutable');
var Moment = require('moment');
function getDepartments(){
return {departments: AppStore.getDepartments()}
}
function getVehicleCount() {
return AppStore.getVehicles().size;
}
var scrollOptions = {
scrollX: true,
scrollY: true,
probeType: 3,
bounce: true,
scrollbars: true,
mouseWheel: true
};
var Page = React.createClass({
mixins: [AppWatchMixin(getDepartments), PureRenderMixin],
onScroll: function (scroller) {
AppActions.scroll(AppConstants.Scroll.PAGE, scroller.x, scroller.y);
},
onScrollStart: function() {
AppActions.scrollStart();
},
onScrollEnd: function (scroller) {
AppActions.scrollEnd(AppConstants.Scroll.PAGE, scroller.x, scroller.y);
},
componentDidMount: function() {
AppStore.setPageScroll(this.refs.pageScroll.getIScrollInstance());
},
handleClick: function (e) {
if (!AppStore.isScrolling()) {
var x = e.nativeEvent.changedTouches != null ? e.nativeEvent.changedTouches[0].clientX : e.clientX;
var y = e.nativeEvent.changedTouches != null ? e.nativeEvent.changedTouches[0].clientY : e.clientY;
var vehicleIndex = Math.floor((y - AppStore.getCoords().get('y') - (AppConstants.SetupValues.SLOT_HEIGHT * 2)) / AppConstants.SetupValues.SLOT_HEIGHT);
var timeIndex = Math.floor((x - AppStore.getCoords().get('x') - (AppConstants.SetupValues.SLOT_WIDTH * 3)) / AppConstants.SetupValues.SLOT_WIDTH);
var vehicle = AppStore.getVehicles().slice(vehicleIndex, vehicleIndex + 1).first();
var time = AppStore.getTimeline().slice(timeIndex, timeIndex + 1).first().first();
AppActions.clickPage(x, y, vehicle, time);
}
AppStore.setScrolling(false);
},
render: function () {
var before = AppConstants.SetupValues.SLOTS_BEFORE;
var after = AppConstants.SetupValues.SLOTS_AFTER;
var totalWidth = (before + after + 1) * AppConstants.SetupValues.SLOT_WIDTH;
var totalHeight = (getVehicleCount() * AppConstants.SetupValues.SLOT_HEIGHT);
var departments = this.state.departments.map(function (department, index) {
return <SlotsDepartment key={index} department={department} />
});
var style = {
paddingTop: AppConstants.SetupValues.SLOT_HEIGHT * 2,
paddingLeft: AppConstants.SetupValues.SLOT_WIDTH * 3
}
var innerStyle = {
height: totalHeight,
width: totalWidth
}
return (
<ReactIScroll ref="pageScroll" iscroll={IScroll} options={scrollOptions} onScroll={this.onScroll} onScrollStart={this.onScrollStart} onScrollEnd={this.onScrollEnd} className="page-container" style={style} >
<div className="page-inner" style={innerStyle} onTouchEnd={this.handleClick} onClick={this.handleClick}>
{departments}
</div>
</ReactIScroll>
);
}
});
module.exports = Page;
以下是我的app.jsx文件和路由:
var React = require('react');
var Template = require('./app-template.jsx');
var Router = require('react-router-component');
var Locations = Router.Locations;
var Location = Router.Location;
var NotFound = Router.NotFound;
var AppStore = require('../stores/app-store');
var Diary = require('./diary/diary.jsx');
var Login = require('./login/login.jsx');
var Helpdesk = require('./helpdesk/helpdesk.jsx');
var App = React.createClass({
componentDidMount: function() {
AppStore.setRouterLocations(this.refs.routerLocations);
},
render: function(){
return (
<Template className="react-container">
<Locations className="react-container" ref="routerLocations">
<Location path="*/diary/:zoom" handler={Diary} />
<Location path="*/helpdesk" handler={Helpdesk} />
<Location path="*/login" handler={Login} />
<Location path="*/login/:error" handler={Login} />
<NotFound handler={Diary} />
</Locations>
</Template>
);
}
});
module.exports = App;
var React=require('React');
var-Template=require('./app-Template.jsx');
var Router=require('react-Router-component');
var位置=路由器位置;
var位置=路由器位置;
var NotFound=Router.NotFound;
var AppStore=require(“../stores/AppStore”);
var日记=要求('./日记/日记.jsx');
var Login=require('./Login/Login.jsx');
var Helpdesk=require('./Helpdesk/Helpdesk.jsx');
var App=React.createClass({
componentDidMount:function(){
AppStore.setRouterLocations(this.refs.routerLocations);
},
render:function(){
返回(
);
}
});
module.exports=App;
及其模板:
var React = require('react');
var Loading = require('./loading.jsx');
var Template = React.createClass({
render: function() {
return (
<div>
<div className="react-container">
{this.props.children}
</div>
<Loading />
</div>
);
}
});
module.exports = Template;
var React=require('React');
var-Loading=require('./Loading.jsx');
var Template=React.createClass({
render:function(){
返回(
{this.props.children}
);
}
});
module.exports=模板;
您可能已将react iscroll
升级到v1.0,这引入了一些突破性的更改。最可能的罪魁祸首是将iscroll
prop重命名为iscroll
。从:
//v1.0
//1.0以下版本
您可能已将react iscroll
升级到v1.0,这引入了一些突破性的更改。最可能的罪魁祸首是将iscroll
prop重命名为iscroll
。从:
//v1.0
//1.0以下版本
谢谢。不幸的是,我认为这没有帮助。我使用的是版本0.1.7,我尝试过更改道具名称的版本(以防万一)。我还尝试升级到版本1,并使用更新的道具名称。我仍然收到同样的警告和错误。我明白了。如果您将您的package.json
与您的问题一起提供给其他人查看,这将非常有帮助。或者,问题可能与您的react router
设置有关吗?代码的这一部分也会有帮助。我已经根据要求用更多信息更新了原始问题。这方面有什么进展吗?我对ReactIScroll也有同样的问题。谢谢你。不幸的是,我认为这没有帮助。我使用的是版本0.1.7,我尝试过更改道具名称的版本(以防万一)。我还尝试升级到版本1,并使用更新的道具名称。我仍然收到同样的警告和错误。我明白了。如果您将您的package.json
与您的问题一起提供给其他人查看,这将非常有帮助。或者,问题可能与您的react router
设置有关吗?代码的这一部分也会有帮助。我已经根据要求用更多信息更新了原始问题。这方面有什么进展吗?我也有同样的问题。
var React = require('react');
var Loading = require('./loading.jsx');
var Template = React.createClass({
render: function() {
return (
<div>
<div className="react-container">
{this.props.children}
</div>
<Loading />
</div>
);
}
});
module.exports = Template;
// v1.0
<ReactIScroll iScroll={iScroll}>
// versions below 1.0
<ReactIScroll iscroll={iScroll}>