Question

我正在尝试在.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脚本？

Answer 1

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

你好

在这种情况下，正确的文件是CDN文件夹中的JS。的 “字符串”是未定义的错误，是由于缺少“道具类型”引起的。

让我在此处放置日历的一些可运行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>

我们运送剑道反应全部包装。这包括所有其他软件包。 https://unpkg.com/@progress/kendo-react-all@2.8.0/dist/cdn/js/kendo-react-all.js 但是在这种情况下，您将需要为 kendo-data-query和kendo-drawing。因为它们是 pdf / excel导出，已包含在所有软件包中。

这里是一个示例，其中加载了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）之前添加了名称空间。

包含带有脚本标签的Kendo React

1 个答案: