react 使用 报错

[zhuchaoyang]

index.js:302 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_14_minirefresh___default.a is not a constructor
at WeCourseDetail.componentDidMount (index.js:302)
at commitLifeCycles (react-dom.development.js:8770)
at commitAllLifeCycles (react-dom.development.js:9946)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
at invokeGuardedCallback (react-dom.development.js:438)
at commitRoot (react-dom.development.js:10050)
at performWorkOnRoot (react-dom.development.js:11017)
at performWork (react-dom.development.js:10967)
at requestWork (react-dom.development.js:10878)
at scheduleWorkImpl (react-dom.development.js:10732)
at scheduleWork (react-dom.development.js:10689)
at Object.enqueueSetState (react-dom.development.js:6212)
at DynamicComponent.Component.setState (react.development.js:237)
at dynamic.js:99
at
componentDidMount @ index.js:302
commitLifeCycles @ react-dom.development.js:8770
commitAllLifeCycles @ react-dom.development.js:9946
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10050
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
enqueueSetState @ react-dom.development.js:6212
Component.setState @ react.development.js:237
(anonymous) @ dynamic.js:99
Promise resolved (async)
load @ dynamic.js:96
DynamicComponent @ dynamic.js:82
constructClassInstance @ react-dom.development.js:6355
updateClassComponent @ react-dom.development.js:7839
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
render @ index.js:126
start @ index.js:68
module.exports @ index.js:30
webpack_require @ bootstrap 67116df37e4280060e90:707
fn @ bootstrap 67116df37e4280060e90:112
(anonymous) @ index.js:75
webpack_require @ bootstrap 67116df37e4280060e90:707
module.exports @ bootstrap 67116df37e4280060e90:805
(anonymous) @ bootstrap 67116df37e4280060e90:805
13:43:25.273 index.js:2177 The above error occurred in the component:
in WeCourseDetail (created by Connect(WeCourseDetail))
in Connect(WeCourseDetail) (created by Route)
in Route (created by routerConfigSimpleCourse)
in Switch (created by routerConfigSimpleCourse)
in Router (created by routerConfigSimpleCourse)
in div (created by routerConfigSimpleCourse)
in routerConfigSimpleCourse (created by DynamicComponent)
in DynamicComponent (created by Route)
in Route
in Switch
in Router
in div (created by App)
in App
in Provider
in Unknown

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

[ZhongXiaoZero]

我也遇到同样的问题，后面你有解决么？请教下

[zhuchaoyang]

import React, { Component } from 'react'

import MiniRefreshTools from 'minirefresh';
import 'minirefresh/dist/debug/minirefresh.css';

// import { addEvent, removeEvent } from 'utils/dom.js'

import './index.scss'

// import 'minirefresh/dist/themes/drawer3d/minirefresh.theme.drawer3d.min.js';
// import 'minirefresh/dist/themes/drawer3d/minirefresh.theme.drawer3d.min.css';

class MiniRefresh extends Component {
componentDidMount(){
this.initMiniRefresh();
let ps = this.props;
if (ps.onRef){
this.props.onRef(this);
}

// addEvent('scroll', this.refs.miniRefresh, this.onScroll);

}
componentWillUnmount = () => {
// removeEvent('scroll', this.refs.miniRefresh, this.onScroll);
}
onScroll = () => {
// let self = this;
// let st = self.state;
// let ps = self.props;

// let scrollTop = parseInt(st.miniRefresh.getPosition(), 10);
// ps.onScroll(scrollTop);

}
initMiniRefresh = () => {
let self = this;
// let st = self.state;
let ps = self.props;

self.miniRefresh = **new MiniRefreshTools.theme.defaults**(Object.assign(ps.options, {
  down: Object.assign(ps.options.down || {}, {
    callback(){
      ps.onMiniRefreshPullDown && ps.onMiniRefreshPullDown();

      // 结束下拉刷新
      self.miniRefresh.endDownLoading();
    },
  }),
  up: Object.assign(ps.options.up || {}, {
    // onScroll(){
    //   ps.onMiniRefreshScroll && ps.onMiniRefreshScroll();
    // },
    callback(){
      ps.onMiniRefreshPullUp && ps.onMiniRefreshPullUp(isHasNext => {
        if (isHasNext){
          self.miniRefresh.endUpLoading(false);
        } else {
          self.miniRefresh.endUpLoading(true);
        }
      }, () => {
        self.miniRefresh.endUpLoading(true);
      });

      // 注意，由于默认情况是开启满屏自动加载的，所以请求失败时，请务必endUpLoading(true)，防止无限请求
      // self.miniRefresh.endUpLoading(true);
    }
  })
}))

// st.miniRefresh.scrollTo(200, 300);

// self.refs.miniRefresh.scrollTop = 300;

}

render(){
let ps = this.props;

return (
  <div className={`minirefresh-wrap ${ps.wrappName ? ps.wrappName : ''}`} ref="miniRefresh">
    <div className={`minirefresh-scroll ${ps.wrappNameScroll ? ps.wrappNameScroll : ''}`}>
      {ps.children}
    </div>
  </div>
)

}
}

export default MiniRefresh;

[DarkPage]

还没有解决吗？淡淡的忧伤啊

[DarkPage]

雷锋叔叔又回来了

React正确使用姿势:）

import React, { Component } from 'react'

// 参照官方文档，src源码只供编译，import使用dist/debug下的
import MiniRefreshTools from 'minirefresh/dist/debug/minirefresh';
import 'minirefresh/dist/debug/minirefresh.css'

// theme1
import 'minirefresh/dist/debug/themes/applet/minirefresh.theme.applet.js';
import 'minirefresh/dist/debug/themes/applet/minirefresh.theme.applet.css';

// theme2
import 'minirefresh/dist/debug/themes/drawerslider/minirefresh.theme.drawerslider.js';
import 'minirefresh/dist/debug/themes/drawerslider/minirefresh.theme.drawerslider.css';

// React16.x 其他版本没测试，自行研究啦~
export default class CustomScroll extends Component {
  constructor(props) {
    super(props)
    this.scrollContainer = React.createRef()
  }
  componentDidMount() {
    // 上面导入了主题，下面使用
    // const MiniRefresh = MiniRefreshTools.theme.applet;
    const MiniRefresh = MiniRefreshTools.theme.drawerslider;

    // 实例化
    const miniRefresh = new MiniRefresh({ ...yourOption })
  }
  render() {
    return (
      <div ref={this.scrollContainer} className="minirefresh-wrap">
        <div className="minirefresh-scroll">
          {this.props.children}
        </div>
      </div>
    )
  }
}

// 自定义主题参考官网，在源码theme目录下拷贝一份，文件名换个名字就可以了，代码内部也搜索替换掉，然后build

// ps: node_module/minirefresh源码下build之后，建议拷贝到自己的项目中，否则CI流水就没了╮(╯_╰)╭ over~

// star~

[Zhouwenli]

有react使用实例吗？