Включите Kendo React с тегом Script
Я пытаюсь разрабатывать с Kendo React в приложении .NET Web Forms. Похоже, что Kendo распространяет свои пакеты в виде различных модулей JavaScript — папка dist в их пакетах узлов содержит следующие четыре подпапки:
- cdn/js
- эс
- нпм
- системные
Я уверен, что с этим относительно легко работать в некоторых новых системах JavaScript, но у меня нет доступа к таким утилитам, как node.js, для управления модулями. Я пытаюсь просто включить файл JavaScript с тегом script, но пока безуспешно. Я получаю следующие ошибки при попытке включить @progress/kendo-react-common:
- cdn/js:
Uncaught TypeError: Cannot read property 'string' of undefined - es:
Uncaught SyntaxError: Unexpected token {(в любом случае я не ожидаю, что необработанный браузер пойметimport) - нпм:
Uncaught ReferenceError: exports is not defined - системные:
Uncaught ReferenceError: System is not defined
Похоже, что @TylerDahle сделал что-то подобное здесь: Как получить доступ к виджетам кендо-реакции при доступе к раскрывающимся спискам реагирования на javascript по сценарию вместо импорта? Но я не знаю, откуда он взял свой источник.
Есть ли способ включить скрипт Kendo React с тегом script?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это было опубликовано администратором Progress Telerik Василием здесь:
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/[email protected]/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/[email protected]/dist/react-transition-group.js"></script> <script type = "text/javascript" src = "https://www.unpkg.com/[email protected]/umd/react-dom-server.browser.production.min.js"></script> <script src = "https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/umd/react-dom-server.browser.production.min.js"></script> <script src = "https://www.unpkg.com/[email protected]/dist/react-transition-group.js"></script> <script src = "https://unpkg.com/[email protected]/babel.min.js"></script> <script src = "https://www.unpkg.com/[email protected]/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/[email protected]/hammer.min.js"></script> <script src = "https://cdn.jsdelivr.net/npm/@progress/[email protected]/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).
Боюсь, что мне мало для понимания проблемы, но я попробую. Можете ли вы открыть инструменты разработки браузера с помощью F12 и убедиться, что скрипт кендо действительно загружается?
моя проблема решена, я просто не добавил скрипт kendoReactAll.
этот код все еще дает ошибку: Uncaught ReferenceError: KendoReactAll не определен @Bondolin