包含带有脚本标签的Kendo React [英] Include Kendo React with Script Tag

查看：98
本文介绍了包含带有脚本标签的Kendo React的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在.NET Web窗体应用程序中使用Kendo React进行开发. Kendo似乎将其软件包分发为各种JavaScript模块-节点软件包中的dist文件夹包含以下四个子文件夹:

I am trying to develop with Kendo React in a .NET Web Forms application. It looks like Kendo distributes their packages as a variety of JavaScript modules -- the dist folder in their node packages contains the following four subfolders:

  • cdn/js
  • es
  • npm
  • systemjs

我确定这在某些较新的JavaScript系统中使用起来相对容易，但是我无权访问诸如node.js之类的实用程序来管理模块.我试图简单地包括一个带有script标记的JavaScript文件，但是到目前为止还算不上什么.尝试包含@progress/kendo-react-common时出现以下错误:

I'm sure this is relatively painless to work with in some of the newer JavaScript systems, but I do not have access to utilities such as node.js to manage modules. I am trying to simply include a JavaScript file with a script tag, but so far have not had much luck. I get the following errors when trying to include @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
  • cdn/js: Uncaught TypeError: Cannot read property 'string' of undefined
  • es: Uncaught SyntaxError: Unexpected token { (not like I expect a raw browser to understand import anyway)
  • npm: Uncaught ReferenceError: exports is not defined
  • systemjs: Uncaught ReferenceError: System is not defined

@TylerDahle似乎在此处做了类似的操作:如何通过脚本访问react下拉列表javascript时如何访问kendo-react窗口小部件进口?但是我不知道他从哪里得到他的货源.

It looks like @TylerDahle has done something similar here: How to access kendo-react widgets when accessing the react dropdowns javascript by script instead of import? But I don't know where he gets his source from.

是否可以使用带有script标签的Kendo React脚本?

Is there any way to include a Kendo React script with a script tag?

推荐答案

此内容由Progress Telerik管理员Vasil

This was posted by Progress Telerik admin Vasil here:

你好

在这种情况下，正确的文件是CDN文件夹中的JS.这 字符串"是未定义的错误，是由于缺少属性类型"引起的.

The correct files in this case are the JS in the CDN folders. The 'string' is undefined error comes from missing 'prop-types'.

让我在此处放置日历的一些可运行的html页面， 加载所需的脚本. https://jsbin.com/sicaquqofi/3/edit?html，输出

Let me put here some runnable html page of the Calendar that just loads the required scripts. 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 但是在这种情况下，您将需要为 kendo-data-query和kendo-drawing.因为它们是 pdf/excel导出，已包含在所有软件包中.

We ship kendo-react-all package. That includes all other packages. https://unpkg.com/@progress/kendo-react-all@2.8.0/dist/cdn/js/kendo-react-all.js But in this case you will need to add additional scripts for the kendo-data-query and kendo-drawing. Because they are required by the pdf/excel export, that are included into the all package.

这里是一个示例，其中加载了kendo-react-all cdn脚本. https://jsbin.com/cetejepamu/1/edit?html，输出

Here is an example with kendo-react-all cdn script loaded. 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

Regards,
Vasil
Progress Telerik

尤其要注意，在组件名称(例如KendoReactAll.Calendar)之前添加了名称空间.

In particular, note the addition of the namespace before the component name (e.g. KendoReactAll.Calendar).

这篇关于包含带有脚本标签的Kendo React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆