包含带有脚本标签的 Kendo React答案

【问题标题】：Include Kendo React with Script Tag包含带有脚本标签的 Kendo React
【发布时间】：2019-08-30 18:49:58
【问题描述】：

我正在尝试在 .NET Web Forms 应用程序中使用 Kendo React 进行开发。看起来 Kendo 将他们的包分发为各种 JavaScript 模块——他们的节点包中的 dist 文件夹包含以下四个子文件夹：

cdn/js
es
npm
systemjs

我确信在一些较新的 JavaScript 系统中使用这相对容易，但我无法访问诸如 node.js 之类的实用程序来管理模块。我试图简单地包含一个带有script 标签的 JavaScript 文件，但到目前为止还没有太多运气。尝试包含 @progress/kendo-react-common 时出现以下错误：

cdn/js:Uncaught TypeError: Cannot read property 'string' of undefined
es：Uncaught SyntaxError: Unexpected token {（不像我期望原始浏览器能够理解 import）
npm：Uncaught ReferenceError: exports is not defined
systemjs:Uncaught ReferenceError: System is not defined

看起来@TylerDahle 在这里做了类似的事情：How to access kendo-react widgets when accessing the react dropdowns javascript by script instead of import? 但我不知道他的来源。

有什么方法可以包含带有script 标签的 Kendo React 脚本？

【问题讨论】：

标签： javascript html reactjs kendo-ui kendo-react-ui

【解决方案1】：

这是由 Progress Telerik 管理员 Vasil here 发布的：

你好，

在这种情况下，正确的文件是 CDN 文件夹中的 JS。这 'string' is undefined error 来自缺少'prop-types'。

让我在这里放一些日历的可运行 html 页面加载所需的脚本。 https://jsbin.com/sicaquqofi/3/edit?html,output

代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <link rel="stylesheet" href="https://www.unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">
  <script type="text/javascript" src="https://www.unpkg.com/prop-types@15.7.2/prop-types.min.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/@progress/kendo-react-dateinputs/dist/cdn/js/kendo-react-dateinputs.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/react-transition-group@2.5.3/dist/react-transition-group.js"></script>
  <script type="text/javascript" src="https://www.unpkg.com/react-dom@16.8.2/umd/react-dom-server.browser.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>
           <KendoReactDateinputs.Calendar />
        </div>,
        document.getElementById('root')
      );
  </script>


  </body></html>

我们提供 kendo-react-all 软件包。这包括所有其他软件包。 https://unpkg.com/@progress/kendo-react-all@2.8.0/dist/cdn/js/kendo-react-all.js 但在这种情况下，您需要为剑道数据查询和剑道绘图。因为他们需要 pdf/excel 导出，包含在 all 包中。

这是一个加载了 kendo-react-all cdn 脚本的示例。 https://jsbin.com/cetejepamu/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script  src="https://www.unpkg.com/react-dom@16.8.2/umd/react-dom-server.browser.production.min.js"></script>
  <script src="https://www.unpkg.com/react-transition-group@2.5.3/dist/react-transition-group.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <script src="https://www.unpkg.com/prop-types@15.7.2/prop-types.min.js"></script>

  <link rel="stylesheet" href="https://www.unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@progress/kendo-drawing@1.5.10/dist/cdn/js/kendo-drawing.js">

  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <div>
        <KendoReactAll.Grid data = {[{a:'1' , b:2},{a:'3' , b:4}]} />
        <br />
        <KendoReactAll.Calendar />

        </div>,
        document.getElementById('root')
      );
  </script>


  </body></html>

问候，
Vasil
Progress Telerik

特别要注意在组件名称之前添加的命名空间（例如KendoReactAll.Calendar）。

【讨论】：

这段代码仍然报错：Uncaught ReferenceError: KendoReactAll is not defined @Bondolin
恐怕这对我来说理解的问题并不多，但我会尝试的。你能用 F12 打开你的浏览器开发工具并确保剑道脚本确实被加载了吗？
我的问题解决了，我只是没有添加 kendoReactAll 脚本。