如何解决使用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>
然后我有一个脚本来构建React DatePicker
组件,这是它的相关片段:
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",(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";
,因此从{{ 1}}在CDN上不起作用)
是否有这样的方式-例如-我可以本地date-fns
所需的模块npm run build
,然后从我的脚本中调用react API,如上所示? (我收到的一个建议是将脚本配置为react-datepicker
中的条目,但是afaik React不使用webpack
,尽管我在webpack
中看到它是used。)
在React docs中,我可以读到
使用React不需要JSX
因此,从理论上说 这样的事情应该可行。
我已经在github react-datepicker
仓库上打开了question/issue(在从react-datepicker
调用此组件的上下文中)。
解决方法
是否有这样的方式-例如-我可以本地
npm run build
所需的模块react-datepicker
,然后从我的脚本中调用react API,如上所示?
是的,有一个知名的solution!
按如下方式编写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到proj的index.html模板中的3个脚本标签
和
<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,{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",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组件。
顺便说一句,我必须在 仅供参考,这是WebSharper项目中的F#代码 完整的开源项目shared on github。selected
的{{1}}中传递一个JS日期,而不是一个Moment日期,无论如何,我不确定为什么这与问题无关。props
我认为主要问题是WebSharper脚本不是JavaScript modules。在这种情况下,应该立即导入外部模块或将上面的SPA.js
作为Webpack
主条目。实际上,众所周知differences between <script type=module>
和<script>
- 在严格模式下执行模块脚本
- 模块脚本具有自己的作用域
- 模块脚本可以导入其他Javascript模块
- 模块脚本将其定义为未定义
- 内联模块脚本可以具有异步属性
- 模块脚本始终被延迟
实际上confirmed by Adam Granicz在WebSharper方面:
应该是这样,是的,@ Jand42和其他人一直在努力改变当前的输出以支持模块和更好的TS互操作性-多年来一直在议程上,因此结束它将是向前迈出的一大步
(与此同时,当然还有其他选择,例如flatpickr,它也具有jQuery绑定,而不是react-datepicker
或纯React或F#Fable而不是WebSharper.React等)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。