javascript - 如何从没有 npm/webpack 的 HTML 文件中导入反应模块
问题描述
我有一个静态 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>
然后我像这样编写我的javascript:
<script type="text/babel">
class App extends React.Component {...}
并像这样在页面上初始化它:
const domContainer = document.querySelector('#react-container');
ReactDOM.render(<App/>, domContainer);
我的问题是如何使用反应组件库,例如https://www.npmjs.com/package/react-datepicker?
我发现它托管在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)
我应该如何正确导入 DateTimePicker?
解决方案
在摆弄之后react-datepicker
,它似乎缺少一些不能通过 CDN 获得的核心依赖项。相反,另一种选择是使用react-datetime。虽然它没有那么花哨,但它确实完成了工作(稍作调整)。
单击Run Code Snippet
下面的按钮进行演示。
演示:单击Select Date
按钮打开日期选择器,选择日期和/或时间,然后您可以单击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>
推荐阅读
- html - 使用 jQuery 过滤内容
- java - 无法找到一种方法来正确传递具有意图 bw 两个活动的数据
- javascript - 为什么for循环中的异步回调只执行一次?
- c - C奇怪行为中的简单字符串
- .net-core - 无法将 switch 表达式与 dotnet-script 一起使用
- java - 如何用我的流中的空列表替换任何 null 实例?
- vb.net - 从 SQL 读取到 Button
- ssl - IBM-MQ 遥测通道中的刷新 SSL 安全性未按预期工作
- pandas - How to mark or select rows in one dataframe, where value lies between any of the ranges in another dataframe featuring additional identifier
- testing - 转换 Quarkus 测试的响应正文