使用 React API 從 CDN 創建 DatePicker

Question

我正在從 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",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"; ，因此從date-fns isValidDate import isValidDate from "date-fns/isValid";不能從 CDN 工作）

有沒有辦法 - 例如 - 我可以在本地npm run build所需的模塊react-datepicker ，然后從我的腳本中調用 react API，如上所示？ （我收到的一個建議是將我的腳本配置為webpack條目，但 afaik React 不使用webpack ，盡管我看到它在react-datepicker webpack中使用）。

從React docs ，我可以讀到

JSX 不是使用 React 的必要條件

所以理論上像上面這樣的事情應該是可行的。

我已經在 github react-datepicker repo 上打開了一個問題/問題（在從WebSharper.React調用這個組件的上下文中）。

Answer 1

有沒有辦法 - 例如 - 我可以在本地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 個腳本標記復制到您的 proj 和<div id="root"></div>的 index.html 模板中（當然，您為項目應用程序使用不同的 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 的任何像這樣的反應組件！

順便說一句，我必須在selected的props傳遞 JS 日期，而不是 Moment 日期，我不確定為什么，無論如何，這與問題無關。

僅供參考，這是來自 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 上共享的完整開源項目。

Answer 2

我認為主要問題是 WebSharper 腳本不是JavaScript 模塊。 在這種情況下，應該立即導入外部模塊或將上述SPA.js作為Webpack主條目。 其實眾所周知<script type=module>和<script>是有區別的

• 模塊腳本在嚴格模式下執行
• 模塊腳本有自己的作用域
• 模塊腳本可以導入其他 Javascript 模塊
• 模塊腳本將此作為未定義
• 內聯模塊腳本可以有 async 屬性
• 模塊腳本總是被推遲

正如Adam Granicz在 WebSharper 方面所證實的那樣：

應該就是這樣，是的，@Jand42 和其他人一直在努力改變當前的輸出以支持模塊和更好的 TS 互操作性 - 這已經被列入議程多年，所以關閉它會是一個很好的進步

（與此同時，當然還有其他選擇，例如flatpickr ，它也綁定了 jQuery，而不是react-datepicker或純 React 或 F# Fable 而不是 WebSharper.React 等等）