包含带有脚本标签的 Kendo React
Posted
技术标签:
【中文标题】包含带有脚本标签的 Kendo React【英文标题】：Include Kendo React with Script Tag 【发布时间】：2019-08-30 18:49:58 【问题描述】：我正在尝试在 .NET Web Forms 应用程序中使用 Kendo React 进行开发。看起来 Kendo 将他们的包分发为各种 javascript 模块——他们的节点包中的 dist 文件夹包含以下四个子文件夹：
我确信在一些较新的 JavaScript 系统中使用这相对容易，但我无法访问诸如 node.js 之类的实用程序来管理模块。我试图简单地包含一个带有script 标签的 JavaScript 文件，但到目前为止还没有太多运气。尝试包含 @progress/kendo-react-common 时出现以下错误：
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 脚本？
【问题讨论】：
【参考方案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 脚本。以上是关于包含带有脚本标签的 Kendo React的主要内容，如果未能解决你的问题，请参考以下文章