如何从没有npm / webpack的HTML文件中导入React模块

麦可

我有一个静态的html文件,在其中我会像这样反应:

<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/prop-types.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/dist/DateTimePicker.js,但是如果我将其添加为并尝试在我的应用中使用,它会显示:

> 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在SQL Server中从没有标签的xml文件中读取xml数据?

如何使用python从没有标题的文本文件中选择列

如何在React.js中从没有JSON的JSON中获取列表内容?

从没有Fileno()的文件指针获取文件描述符

如何从没有属性的XML文件中获取节点并放入字符串列表

如何从没有任何模块的节点js中的JWT中提取信息?

如何从没有包含数据的文本文件中读取?

从没有URL前缀的蓝图中提供静态文件

HTML:从没有ID的输入中获取价值

如何从没有空列的.dat文件中获取数据

如何从没有命令提示符的文件中删除“系统文件”属性?

如何从没有标签的HTML字符串中获取数字?

如何从没有.tt和edmx文件的数据库优先方法获取表?

从没有capfile的数据包头中提取HTML有效负载

C#从没有扩展名的URL下载文件

如何从没有$ _GET变量的网址获取文件名?

JSoup,从没有标签的HTML中删除文本

我们如何从没有声明文件的NPM库中声明导入类型?

从没有标题的 .pts 文件读取到点云

如何从没有扩展名的路径中获取特定文件名python

如何从没有 html 类的单行文本中提取信息?

如何在 Python3 中从没有格式字符(反斜杠/撇号)的文本文件中导入行

如何从没有文件扩展名的目录中仅保存文件名的子字符串?

如何在Minizinc中从没有变量名的.dzn文件中读取

从没有索引的dict导入数据框

如何从没有 src 目录的模块导出?

python - 如何从没有任何元音的文本文件中过滤单词?

如何在 Python 中从没有 Pandas 的文件中获取数据?

从没有 id 作为列的 CSV 文件中导入数据