Включить Kendo React с тегом скрипта - PullRequest
Новая
       20

Включить Kendo React с тегом скрипта

0 голосов
/ 09 апреля 2019

Я пытаюсь разработать приложение Kendo React в приложении .NET Web Forms. Похоже, что Kendo распространяет свои пакеты в виде различных модулей JavaScript - папка dist в их пакетах узлов содержит следующие четыре подпапки:

  • CDN / JS
  • ы
  • НПМ
  • systemjs

Я уверен, что работать с некоторыми из более новых систем 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
  • systemjs: Uncaught ReferenceError: System is not defined

Похоже, что @TylerDahle сделал нечто подобное здесь: Как получить доступ к кендо-реагирующим виджетам при доступе к javascript реагировать на выпадающие списки по сценарию вместо импорта? Но я не знаю, где он получает свой источник с.

Есть ли способ включить скрипт Kendo React с тегом script?

1 Ответ

1 голос
/ 11 апреля 2019

Сообщение от Progress Telerik admin Vasil here :

Здравствуйте,

В данном случае правильные файлы - это JS в папках CDN. 'строка' не определена. Ошибка возникает из-за отсутствия 'проп-типов'.

Позвольте мне поместить здесь работающую 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-реагировать на все. Это включает в себя все другие пакеты. https://unpkg.com/@progress/kendo-react-all@2.8.0/dist/cdn/js/kendo-react-all.js Но в этом случае вам нужно будет добавить дополнительные скрипты для кендо-запрос данных и кендо-рисование. Потому что они требуются Экспорт в PDF / Excel, включенный во весь пакет.

Вот пример с загруженным cdn-скриптом kendo-реагировать на все. 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>

С уважением,
Василь
Прогресс Telerik

В частности, обратите внимание на добавление пространства имен перед именем компонента (например, KendoReactAll.Calendar).

...