自从升级到react 0.14.3后,react iscroll会生成警告和错误

react-iscroll generates warning and error since upgrading to react 0.14.3

本文关键字:react iscroll 错误 警告      更新时间:2023-09-26

我正在使用反作用滚动。在我将react升级到0.14.3版本之前,它运行良好。在升级react版本后,我不得不将其他几个库更新到最新版本,即:react路由器组件反应引导react插件纯渲染混合我还必须添加react dom

我不得不用reactdom.render替换任何react.render语句,并删除react.initializeTouchEvents(true)语句。

当jsx文件中的render方法尝试渲染react滚动组件时,我现在收到一个警告和错误,如下所示:

警告:React.createElement:type不应为null、undefined、boolean或number。它应该是字符串(对于DOM元素)或ReactClass(对于复合组件)。检查Page的渲染方法。

未捕获错误:不变冲突:元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件),但得到:对象。检查Page 的渲染方法

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;

如果我从render方法中删除ReactIScroll元素,并用其他任何东西替换,例如一个空的div或另一个react组件,我不会收到错误或警告。

有没有其他人也有类似的问题,或者可以提出一些尝试的建议?

提前感谢

这是我的项目包.json:

{
  "name": "diary",
  "version": "1.0.0",
  "description": "DCM 2.0",
  "main": "gulpfile.js",
  "dependencies": {
    "autoprefixer": "^6.0.3",
    "bootbox": "^4.4.0",
    "bootstrap": "^3.3.5",
    "browserify": "^10.2.4",
    "event-stream": "^3.3.1",
    "flux": "^2.0.3",
    "gulp": "^3.9.0",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-csso": "^1.0.0",
    "gulp-postcss": "^6.0.0",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^5.1.0",
    "gulp-rev-replace": "^0.4.2",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.2.0",
    "gulp-util": "^3.0.6",
    "immutable": "^3.7.4",
    "immutable-json": "^2.0.0",
    "iscroll": "^5.1.3",
    "jquery": "^2.1.4",
    "js-cookie": "^2.0.3",
    "moment": "^2.10.3",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-async": "^2.1.0",
    "react-bootstrap": "^0.28.1",
    "react-addons-pure-render-mixin": "^0.14.3",
    "react-iscroll": "^0.1.7",
    "react-loader": "^1.4.0",
    "react-router-component": "^0.28.0",
    "react-tap-event-plugin": "^0.1.7",
    "reactify": "^1.1.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "jest": {
    "collectCoverage": true,
    "rootDir": "./",
    "scriptPreprocessor": "./preprocessor.js",
    "unmockedModulePathPatterns": [
      "react"
    ]
  },
  "scripts": {
    "test": "jest"
  },
  "author": "Chris Child",
  "license": "ISC",
  "devDependencies": {
    "gulp-jest-iojs": "^1.0.1",
    "jest-cli": "^0.5.0"
  }
}

这是我的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 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;

您可能将react-iscroll升级到v1.0,这引入了一些突破性的更改。最可能的罪魁祸首是将iscroll道具重命名为iScroll。来自文档:

// v1.0
<ReactIScroll iScroll={iScroll}>
// versions below 1.0
<ReactIScroll iscroll={iScroll}>