时间戳

首页 > 解决方案 > 获取 Object(...) 不是我的拖放上下文中的函数。我正在使用反应

reactjs - 获取 Object(...) 不是我的拖放上下文中的函数。我正在使用反应

问题描述

为我的应用程序使用 react-big-scheduler，它需要拖放上下文。因此，当我导入并设置它时，我得到 Object(...) is not a function

我也尝试在渲染中使用作为反应组件，并且元素类型无效。

withDnDContext.js

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

export default DragDropContext(HTML5Backend);

propertyCalander.jsx（这是我使用调度程序的地方）

import React, { Component } from 'react';
import Scheduler, {
  SchedulerData,
  ViewTypes,
  DemoData
} from 'react-big-scheduler';
// import { DragDropContextProvider } from 'react-dnd';
// import HTML5Backend from 'react-dnd-html5-backend';

import withDragDropContext from './withDnDContext';
import 'react-big-scheduler/lib/css/style.css';


class PropertyCalnder extends Component { // eslint-disable-line
  constructor(props) {
    super(props);
    const schedulerData = new SchedulerData('2017-12-18', ViewTypes.Week);
    schedulerData.localeMoment.locale('en');
    schedulerData.setResources(DemoData.resources);
    schedulerData.setEvents(DemoData.events);
    this.state = {
      viewModel: schedulerData
    };
  }

  prevClick = e => {
    console.log(e);
  };

  nextClick = e => {
    console.log(e);
  };

  onSelectDate = e => {
    console.log(e);
  };

  onViewChange = e => {
    console.log(e);
  };

  eventClicked = e => {
    console.log(e);
  };

  render() {
    const { viewModel } = this.state;
    return (
      <div>
        {/* <DragDropContextProvider backend={HTML5Backend}> */}
        <Scheduler
          schedulerData={viewModel}
          prevClick={this.prevClick}
          nextClick={this.nextClick}
          onSelectDate={this.onSelectDate}
          onViewChange={this.onViewChange}
          eventItemClick={this.eventClicked}
        />
        {/* </DragDropContextProvider> */}
      </div>
    );
  }
}
export default withDragDropContext(PropertyCalnder);

包.json

...

"react-dnd": "^7.5.0",
"react": "^16.8.6",
"react-dnd-html5-backend": "^7.5.0",
"react-big-scheduler": "^0.2.5",



It should just show the demo page as linked here https://stephenchou1017.github.io/scheduler/#/

but instead getting Object(...) is not a function

标签： reactjsdrag-and-dropreact-dnd

解决方案

我遇到了同样的问题，但是使用以下软件包可以正常工作。当您将 react-big-scheduler 更新为“0.2.7”时会出现此问题

"react-dnd": "5.0.0",
"react-dnd-html5-backend": "5.0.1",
"react-big-scheduler": "0.2.6",

你可以运行这个命令

"npm i react-big-scheduler@0.2.6"

推荐阅读