在 React 应用程序中包含调度程序模块

Question

我是新手，刚刚开始使用钩子和基于函数的组件进行处理。我试图将 React 调度程序合并到我的 React 应用程序中，但没有成功。我想使用的调度程序在这个 repo 下，它基于基于类的组件；

https://github.com/hiramzamorano/react-big-scheduler

我创建了一个 React 应用程序并添加了模块，我可以在 dependencies 下的 package.json 文件中看到它

create-react-app test_react

npm install scheduler-react --save

我删除了所有不需要的文件，我的应用程序文件夹只有

• index.js
• app.js
• 应用程序.css
• a_basic.js
• a_basic.css

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
      <App />,
  document.getElementById('root')
);

app.js

import React from 'react';
import a_basic from './a_basic';

import './App.css';


function App() {
  return (
    <div className="App">
      <a_basic/>
    </div>
  );
}

export default App;

app.css

body, #root, .App {
    /* background-color: cadetblue; */
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: monospace;
    /* border: 2px solid black;
    border-radius: 20px;  */
}

a_basic.js

import React from 'react'

import Scheduler, {SchedulerData, ViewTypes, DATE_FORMAT} from 'scheduler-react'

import 'scheduler-react/lib/css/style.css'
import moment from 'moment'

import './a_basic.css'


function a_basic() {

    let schedulerData = new SchedulerData(new moment().format(DATE_FORMAT), ViewTypes.Week);
    //set locale moment to the schedulerData, if your locale isn't English. By default, Scheduler comes with English(en, United States).
    moment.locale('zh-cn');
    schedulerData.setLocaleMoment(moment);
    //set resources here or later
    let resources = [
                            {
                    id: 'r0',
                    name: 'Resource0',
                    author: "X",
                    bgColor: 'red',
                    issue: '#1'
                },
                {
                    id: 'r1',
                    name: 'Resource1',
                    author: "X",
                    bgColor: '#D9D9D9',
                    issue: '#2'
                },
                {
                    id: 'r2',
                    name: 'Resource2',
                    author: "X",
                    issue: '#99'
                },
                    ];
    schedulerData.setResources(resources);
    //set events here or later,
    //the event array should be sorted in ascending order by event.start property, otherwise there will be some rendering errors
    let events = [
                    {
                        id: 1,
                        start: '2017-12-18 09:30:00',
                        end: '2017-12-19 23:30:00',
                        resourceId: 'r1',
                        title: 'I am finished',
                        label: 'QA Failed',
                        img: 'https://miro.medium.com/fit/c/28/28/1*UJzclN5h-DYWjRyVqXThUw.png',
                        bgColor: '#D9D9D9',
                        showPopover: false
                    },
                    {
                        id: 2,
                        start: '2017-12-18 12:30:00',
                        end: '2017-12-26 23:30:00',
                        resourceId: 'r2',
                        title: 'I am not resizable',
                        label: 'Development',
                        resizable: false
                    },
                    {
                        id: 3,
                        start: '2017-12-19 12:30:00',
                        end: '2017-12-20 23:30:00',
                        resourceId: 'r3',
                        title: 'I am not movable',
                        movable: false
                    },
                    {
                        id: 4,
                        start: '2017-12-19 14:30:00',
                        end: '2017-12-20 23:30:00',
                        resourceId: 'r1',
                        title: 'I am not start-resizable',
                        startResizable: false
                    },
                    {
                        id: 5,
                        start: '2017-12-19 15:30:00',
                        end: '2017-12-20 23:30:00',
                        resourceId: 'r2',
                        title: 'R2 has recurring tasks every week on Tuesday, Friday',
                        rrule: 'FREQ=WEEKLY;DTSTART=20171219T013000Z;BYDAY=TU,FR',
                        bgColor: '#f759ab'
                    }
                ];
    schedulerData.setEvents(events);



    return (
        <div id ="base">
            <Scheduler 
                schedulerData={schedulerData}
                // prevClick={prevClick}
                // nextClick={nextClick}
                // onSelectDate={onSelectDate}
                // onViewChange={onViewChange}
                // eventItemClick={eventClicked}
            />
            
        </div>
    )
}

export default a_basic

a_basic.css

#base {
    width:100%;
    height:100%;
}

我在运行项目时在浏览器中看不到任何东西。我确定我做错了什么，但我不知道它是什么。请不要介意组件名称a_basic。在这一点上，我只是在试验模块包含

如何使用功能组件方法将此调度程序包含在我的应用程序中？

编辑：我已将名称从 a_basic.js 更改为 BasicScheduler.js 以避免意外渲染。但是现在我遇到了一些与“拖放上下文”相关的错误

TypeError：createBackend 不是函数

仍然无法让应用程序工作

Answer 1

我在我的项目中使用了这个库并且它工作得很好。

我认为你的情况存在版本问题，我建议你使用 "react-big-scheduler": "^0.2.7",

你可以试试-

npm install [email protected]

还有一件事......，请不要安装 DnD 模块 因为它已被弃用，任何现在都不起作用。所以试试看没有它。

希望这个建议对你有帮助