包含 Kendo React with Script 标签
Include Kendo React with Script Tag
我正在尝试在 .NET Web Forms 应用程序中使用 Kendo React 进行开发。看起来 Kendo 将他们的包分发为各种 JavaScript 模块——他们的节点包中的 dist
文件夹包含以下四个子文件夹:
- cdn/js
- es
- npm
- 系统
我敢肯定,在某些较新的 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
- 系统:
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 脚本吗?
这是 Progress Telerik 管理员 Vasil 发布的 here:
Hello,
The correct files in this case are the JS in the CDN folders. The
'string' is undefined error comes from missing 'prop-types'.
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
Here is the code:
<!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>
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.
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>
Regards,
Vasil
Progress Telerik
特别注意在组件名称之前添加命名空间(例如 KendoReactAll.Calendar
)。
我正在尝试在 .NET Web Forms 应用程序中使用 Kendo React 进行开发。看起来 Kendo 将他们的包分发为各种 JavaScript 模块——他们的节点包中的 dist
文件夹包含以下四个子文件夹:
- cdn/js
- es
- npm
- 系统
我敢肯定,在某些较新的 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
- 系统:
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 脚本吗?
这是 Progress Telerik 管理员 Vasil 发布的 here:
Hello,
The correct files in this case are the JS in the CDN folders. The 'string' is undefined error comes from missing 'prop-types'.
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
Here is the code:
<!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>
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.
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>
Regards,
Vasil
Progress Telerik
特别注意在组件名称之前添加命名空间(例如 KendoReactAll.Calendar
)。