Javascript 使用React API从CDN创建日期选择器
我正在从CDN导入一些React模块(这不是一个要求,我还尝试了本地构建,更多信息请参见最后一个问题): 我从JS控制台看到的错误是:Javascript 使用React API从CDN创建日期选择器,javascript,reactjs,f#,react-datepicker,websharper,Javascript,Reactjs,F#,React Datepicker,Websharper,我正在从CDN导入一些React模块(这不是一个要求,我还尝试了本地构建,更多信息请参见最后一个问题): 我从JS控制台看到的错误是: react-datepicker.min.js:1 Uncaught TypeError: o is not a function at Ee (react-datepicker.min.js:1) 当脚本调用ReactDOM.render时 有没有办法理解什么是o?也许有一个进口丢失了? (Edit好,查看chrome调试器并将其与,o是isVali
react-datepicker.min.js:1 Uncaught TypeError: o is not a function
at Ee (react-datepicker.min.js:1)
当脚本调用ReactDOM.render
时
有没有办法理解什么是o
?也许有一个进口丢失了?
(Edit好,查看chrome调试器并将其与,o
是isValidDate
,即从“date fns/isValid”导入isValidDate;
,因此从date fns
导入不能从CDN工作)
是否有一种方法,例如,我可以在本地npm运行build
所需的模块,react-datepicker
,然后从我的脚本调用react-API,如上所示?(我收到的建议是将脚本配置为webpack
中的条目,但afaik React不使用webpack
,尽管我在React datepicker
中看到了它)
从我的字典里,我可以读到
JSX不是使用React的要求
因此,从理论上讲,类似上述的事情应该是可行的
我已经在github
react-datepicker
repo(在从WebSharper.react
调用此组件的上下文中)上打开了一个组件。我认为主要的问题是WebSharper脚本不可用。在这种情况下,应立即导入外部模块或将上述SPA.js
作为Webpack
主条目。事实上,众所周知,有
和
- 模块脚本在严格模式下执行
- 模块脚本有自己的作用域
- 模块脚本可以导入其他Javascript模块
- 模块脚本将此设置为未定义
- 内联模块脚本可以具有异步属性
- 模块脚本总是延迟的
react-datepicker
或纯react或F#Fable而不是webharper.react等等)
是否有一种方法,例如,我可以在本地npm运行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
构建,并将静态文件夹从您的bynpm运行构建的构建复制到您项目的SPA文件夹
抄袭
将构建中index.html中的3个脚本标记添加到项目的index.html模板中
和
(当然,您的项目应用程序和
此处将没有可渲染的内容)
在我的情况下,他们是(他们将不同于你)
在您的SPA.js和中,享受来自WebSharper.react的任何react组件
顺便说一句,我必须在道具的选择的中传递一个JS日期,而不是片刻日期,我不知道为什么,无论如何,这与问题无关
仅供参考,这是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())]
let myDate,setMyDate=WrapReact.UseState(DateTime.Today.JS)
让importDatePicker=JS.Eval(“window.MyDatePicker”):?>React.Class
设propDP=
{
所选=myDate
onChange=setMyDate
showTimeSelect=true
}
让日期选择器=
React.CreateElement(importDatePicker,propDP)
WrapReact.setCount
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 );
}
<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,
});
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())]