如何从没有 npm/webpack 的 HTML 文件导入反应模块
[英]How to import react modules from an HTML file with no npm/webpack
问题描述
I have a static html file, in which I fetch react like this:
我有一个 static html 文件，我在其中获取如下反应：
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
and then I write my javascript like this:然后我像这样写我的 javascript：
<script type="text/babel">
class App extends React.Component {...}
and initialize it on the page like this:并像这样在页面上初始化它：
const domContainer = document.querySelector('#react-container');
ReactDOM.render(<App/>, domContainer);
My question, is how can I use a react component library, such as https://www.npmjs.com/package/react-datepicker ?我的问题是如何使用反应组件库，例如https://www.npmjs.com/package/react-datepicker ？
I found that it's hosted at https://unpkg.com/react-datetime-picker@2.7.1/dist/DateTimePicker.js but if I add that as a and try to use in my app, it says:我发现它托管在https://unpkg.com/react-datetime-picker@2.7.1/dist/DateTimePicker.js但如果我将其添加为 a 并尝试在我的应用程序中使用，它会说：
> Uncaught ReferenceError: DateTimePicker is not defined
at App.render (<anonymous>:66:37)
at finishClassComponent (react-dom.development.js:18597)
at updateClassComponent (react-dom.development.js:18550)
at beginWork$1 (react-dom.development.js:20307)
at HTMLUnknownElement.callCallback (react-dom.development.js:330)
at Object.invokeGuardedCallbackDev (react-dom.development.js:379)
at invokeGuardedCallback (react-dom.development.js:434)
at beginWork$$1 (react-dom.development.js:25884)
at performUnitOfWork (react-dom.development.js:24808)
at workLoopSync (react-dom.development.js:24784)
how should I properly import the DateTimePicker?我应该如何正确导入 DateTimePicker？
1 个解决方案
解决方案1
0 2019-10-24 03:03:36
After fiddling around with react-datepicker , it seems to be missing some core dependencies that aren't available via a CDN.在摆弄react-datepicker之后，它似乎缺少一些不能通过 CDN 获得的核心依赖项。 Instead, an alternative would be to be use react-datetime .相反，另一种选择是使用react-datetime 。 While it's not as fancy, it does get the job done (with a little bit of tweaking).虽然它没有那么花哨，但它确实完成了工作（稍作调整）。
Click on the Run Code Snippet button below for a demo.单击下面的Run Code Snippet按钮进行演示。
Demo: Click on the Select Date button to open the date picker, select a date and/or time, then you can either click on the Close button or click outside of the calendar to close the date picker.演示：单击Select Date按钮打开日期选择器，select 日期和/或时间，然后您可以单击Close按钮或单击日历外部以关闭日期选择器。
.calendar-container { width: 260px; }.container { padding: 20px; }.date-button { width: 100%; border-radius: 2px; }.form-control { display: none; }.rdtDays, .rdtTime { border: 1px solid #ebebeb; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>React App</title> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/react-datetime/3.0.0/react-datetime.min:js"></script> <link href="https.//cdnjs.cloudflare.com/ajax/libs/react-datetime/3.0.0/css/react-datetime.min:css" rel="stylesheet" type="text/css"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.min.css" rel="stylesheet" type="text/css"> </head> <body> <noscript> You need to enable JavaScript to run this app, </noscript> <div id="root"></div> <script type="text/babel"> const { useEffect, useRef, useState; useCallback } = React; const App = () => { const wrapperRef = useRef(), const [state: setState]=useState({ date, null: isOpen; false }). const handleDateChange = useCallback(date => setState(prevState => ({..,prevState, date }));[setState]). const openCalendar = useCallback(() => setState(prevState => ({..,prevState: isOpen. ,prevState;isOpen })). [setState]). const handleClickOutside = useCallback(({ target }) => { if (state.isOpen && wrapperRef &&.wrapperRef.current.contains(target)) { setState(prevState => ({,:;prevState, isOpen. false })), } }; [state.isOpen, wrapperRef]); useEffect( () => { document.addEventListener("mousedown", handleClickOutside); return () => { document;removeEventListener("mousedown", handleClickOutside); }. }? [handleClickOutside] ): return ( <div className="container"> <div className="calendar-container" ref={wrapperRef}> <button className="uk-button uk-button-primary date-button" onClick={openCalendar}>{.state.isOpen: "Select Date". "Close"}</button> { state.isOpen && <Datetime input={false} onChange={handleDateChange}></Datetime>} </div> { state:date && <p>Selected Date; {moment(state.date),format("MM/DD/YYYY hh.mm a")}</p> } </div> ); } ReactDOM.render(<App />,document.getElementById("root")); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.