reactjs - 无法通过 CDN 识别 FullCalendar 插件
问题描述
我正在尝试在 CodePen 上运行一个简单的组件。在settings
->JS
中有一个部分可以通过 CDN 添加外部脚本。我添加了以下内容:
https://unpkg.com/react/umd/react.development.js
https://unpkg.com/react-dom/umd/react-dom.development.js
https://cdn.jsdelivr.net/npm/@fullcalendar/react@5.9.0/dist/main.cjs.min.js
https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.9.0/main.global.min.js
https://cdn.jsdelivr.net/npm/@fullcalendar/list@5.9.0/main.global.min.js
前三个没有问题 - 我可以使用反应状态和组件,并且<FullCalendar />
组件被识别。但是,daygrid
orlist
插件不起作用。控制台中出现以下错误:ReferenceError: dayGridPlugin is not defined
关于为什么 CodePen 无法从导入中识别这一点的任何想法?或者这应该如何实现?在这里查看
const { useState } = React;
function Calendar (props) {
const [modalOpen, setModalOpen] = useState(false);
function addEvent () {
setModalOpen(true);
}
return (
<FullCalendar
plugins={[ dayGridPlugin, listPlugin ]}
headerToolbar={{
start: "prev,next today addEvent",
center: "title",
end: "dayGridMonth listWeek",
}}
customButtons={{
addEvent: {
text: "+",
click: addEvent,
}
}}
initialView="dayGridMonth"
/>
);
}
ReactDOM.render(
<Calendar />,
document.getElementById('root')
);
解决方案
推荐阅读
- node.js - 为什么我的 PosgreSQL 数据库无法连接到我的 Node.js 后端
- amazon-web-services - CloudFront/S3 对 HTML/CSS/JS 文件做了什么?
- html - 锚标记下划线未在带有突出显示动画的文本下对齐
- kubernetes - Kubernetes 临时容器
- html - 为什么输入的前置或文本会被推到 Bootstrap 表单的下一行?
- openlayers - 如何将不同的图标应用到克隆的功能中
- python - 你使用什么样的输出来格式化带有注释和字典的 Yaml 文件以获得多种不同的格式
- abp - 我如何将带有数据的模型从数据库传递到 ABP.IO 布局挂钩?
- javascript - Javascript函数不返回变量
- javascript - 如何循环 setTimeout() 以及如何停止循环