javascript - 使用 React API 从 CDN 创建 DatePicker
问题描述
我正在从 CDN 导入一些 React 模块(这不是必需的,我也尝试过使用本地构建,更多关于它的最后一个问题):
<script crossorigin src="https://unpkg.com/react-onclickoutside@6.9.0/dist/react-onclickoutside.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<script crossorigin src="https://unpkg.com/react-datepicker@3.1.3/dist/react-datepicker.min.js"></script>
然后我有一个脚本来构建 ReactDatePicker
组件,这是其中的相关片段:
HelloWorld.Example=function()
{
var p,setCount,count,p$1,c,myDate,datePicker;
p=React$2.useState(0);
setCount=p[1];
count=p[0];
p$1=React$2.useState(new moment(new Date((c=Date.now(),DateUtil.DatePortion(c)))));
myDate=p$1[0];
datePicker=React$2.createElement(DatePicker.default,{
selected:new moment(new Date()),
onChange:p$1[1]
});
React.set_setCount(setCount);
return React$2.createElement("div",null,datePicker,React$2.createElement("p",null,(Html.textf(function($1)
{
我从 JS 控制台看到的错误是:
react-datepicker.min.js:1 Uncaught TypeError: o is not a function
at Ee (react-datepicker.min.js:1)
当脚本调用ReactDOM.render
.
有没有办法理解是什么o
?也许缺少进口?(编辑好吧,查看 chrome 调试器并将其与github进行o
比较isValidDate
,即import isValidDate from "date-fns/isValid";
,因此来自 CDN 的导入date-fns
不起作用)
有没有一种方法——例如——我可以在本地npm run build
使用所需的模块,react-datepicker
然后从我的脚本中调用 react API,如上所示?(我收到的建议是将我的脚本配置为 in 的条目webpack
,但 afaik React 不使用webpack
,尽管我看到它在 中使用)react-datepicker
。
从React docs,我可以读到
JSX 不是使用 React 的必要条件
所以理论上像上面这样的东西应该是可行的。
我在 github repo 上打开了一个问题/问题react-datepicker
(在从 调用此组件的上下文中WebSharper.React
)。
解决方案
有没有一种方法——例如——我可以在本地
npm run build
使用所需的模块,react-datepicker
然后从我的脚本中调用 react API,如上所示?
是的,有一个众所周知的解决方案!
编写一个 index.js 如下
import React from "react";
import DatePicker from 'react-datepicker'
import "react-datepicker/dist/react-datepicker.css";
export {ImportedComponent}
window.MyDatePicker = function MyDatePicker(props) {
console.log("props from window.MyDatePicker", props)
return React.createElement( DatePicker, props );
}
通过构建npm
并将静态文件夹从您的构建复制到您的npm run build
项目的 SPA 文件夹
将构建中 index.html 中的 3 个脚本标签复制到项目的 index.html 模板中,并且
<div id="root"></div>
(当然,您为项目应用程序使用不同的 id,此处将没有任何内容可呈现)
就我而言,它们是(它们对你来说会有所不同)
<div id="root"></div>
<script>!function(e){function t(t){for(var n,l,p=t[0],f=t[1],i=t[2],c=0,s=[];c<p.length;c++)l=p[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(a&&a(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,p=1;p<r.length;p++){var f=r[p];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/";var p=this.webpackJsonpcontent_npm=this.webpackJsonpcontent_npm||[],f=p.push.bind(p);p.push=t,p=p.slice();for(var i=0;i<p.length;i++)t(p[i]);var a=f;r()}([])</script>
<script src="/static/js/2.a6e4c224.chunk.js"></script>
<script src="/static/js/main.b075c560.chunk.js"></script>
现在去
datePicker=React$1.createElement(window.MyDatePicker,{
selected:myDate,
onChange:p$1[1],
showTimeSelect: true,
});
在你的 SPA.js 中,享受任何像 WebSharper.React 这样的反应组件!
顺便说一句,我必须通过 JS 日期,而不是此处的 Moment 日期selected
,props
我不知道为什么,无论如何,这与问题无关。
仅供参考,这是来自 WebSharper 项目的 F# 代码
let myDate, setMyDate = WrapReact.UseState (DateTime.Today.JS)
let importDatePicker = JS.Eval("window.MyDatePicker") :?> React.Class
let propDP =
{
selected = myDate
onChange = setMyDate
showTimeSelect = true
}
let datePicker =
React.CreateElement( importDatePicker, propDP)
WrapReact.setCount <- setCount
div [] [
datePicker
p [] [Html.textf "You selected %s date %s time" (myDate.ToDateString()) (myDate.ToTimeString())]
在 github 上共享的完整开源项目。
推荐阅读
- azure-cognitive-search - Azure 搜索错误:对于小数点的 gt 或 ge 运算符,过滤双精度相同
- spring - 如何从 javax.persistence.EntityManger 获取连接字符串
- javascript - 从javascript中的视频中获取像素处的YUV而不是RGB
- python - 在 Python 中的列表中查找最长和最短的列表
- java - MongoDb Java API 更新失败
- python-3.x - 查询期间丢失与 MySQL 服务器的连接 - Python 3.x - pymysql
- android - 使用滑行在图像视图中显示文本
- c++ - QueryChangesVirtualDisk() 正在返回 Access_Denied (5)?
- ios - 无需点击通知即可获取收到的推送通知列表
- c++ - 重载多个函数的简写