如何从没有 npm/webpack 的 HTML 文件中导入反应模块答案

【问题标题】：How to import react modules from an HTML file with no npm/webpack如何从没有 npm/webpack 的 HTML 文件中导入反应模块
【发布时间】：2019-10-24 11:31:23
【问题描述】：

我有一个静态 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？

【问题讨论】：

试试这个：从这里导入最后两个链接：cdnjs.com/libraries/react-datepicker，特别是 .min.css 和 .min.js

标签： javascript reactjs

【解决方案1】：

在摆弄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>

【讨论】：

感谢您的建议和示例代码，我会同意并支持您的回答。它不完全回答高级问题 - 我希望学习能够将任何打算通过 npm 使用但通过 cdn 直接使用到 html 页面的库导入。我想可能没有办法做到这一点......
主要问题是react-datepicker使用的每个包都有依赖关系。因此，您必须一直遍历此依赖关系树（包括子依赖项的子依赖项等）：github.com/Hacker0x01/react-datepicker/blob/master/…。这就是问题所在。并非所有这些子依赖项都可以通过 CDN 获得；以及那些不适用于当前版本的 react-datepicker。