如何通过script标签在.NET Web Forms中引入Kendo React？

我帮你梳理下这个问题——你遇到的核心是Kendo React不同模块格式的适配问题，结合你.NET Web Forms不能用Node工具的场景，给你一套可行的解决方案：

1. 先搞懂为什么你之前的尝试都报错 #

你试的四个文件夹对应的是不同的模块规范，只有一种适合浏览器直接引入：

• es：ES模块格式，浏览器原生支持需要加type="module"，但依赖链处理起来麻烦，完全不适合你的场景
• npm：CommonJS格式，只能在Node.js或打包工具里用，浏览器根本不认exports变量
• systemjs：需要先加载SystemJS库才能解析，多了额外依赖，没必要折腾
• cdn/js：这才是专为浏览器设计的UMD格式，你之前报错纯粹是因为没先加载React依赖！

2. 正确的引入顺序和写法 #

Kendo React完全依赖React和ReactDOM，必须严格按以下顺序引入：

第一步：引入React的UMD版本 #

先加载React和ReactDOM的生产环境UMD文件（可以用公共CDN，或者把文件下载到你的Web Forms项目本地引用）：

<!-- 公共CDN示例，也可以下载到本地项目后用相对路径引用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

第二步：引入Kendo React的UMD文件 #

从cdn/js文件夹里按依赖顺序引入：先基础公共包，再业务组件包。比如要用下拉框，就得先引kendo-react-common，再引kendo-react-dropdowns：

<!-- 替换成你本地Kendo包的实际路径 -->
<script src="~/lib/@progress/kendo-react-common/dist/cdn/js/kendo-react-common.js"></script>
<script src="~/lib/@progress/kendo-react-dropdowns/dist/cdn/js/kendo-react-dropdowns.js"></script>

<!-- 别忘了引入Kendo的主题样式，否则组件只有功能没有外观 -->
<link rel="stylesheet" href="~/lib/@progress/kendo-theme-default/dist/all.css">

第三步：在页面中使用组件 #

引入后，Kendo React组件会挂载到全局变量上，比如下拉框在KendoReactDropdowns对象里，你可以用React的原生API渲染：

<!-- 准备一个渲染容器 -->
<div id="dropdown-container"></div>

<script>
  // 从全局变量里取出需要的组件
  const { DropDownList } = KendoReactDropdowns;
  // 模拟下拉选项数据
  const dropdownData = [
    { text: "选项1", value: "1" },
    { text: "选项2", value: "2" },
    { text: "选项3", value: "3" }
  ];

  // 用ReactDOM渲染组件到容器里
  const root = ReactDOM.createRoot(document.getElementById('dropdown-container'));
  root.render(
    React.createElement(DropDownList, { 
      data: dropdownData,
      defaultValue: "2"
    })
  );
</script>

3. 解决你之前的具体报错 #

• cdn/js的"Cannot read property 'string' of undefined"：就是因为没先加载React，Kendo的UMD包需要全局存在React对象来解析PropTypes相关内容，补加React的script标签就能解决
• 其他几个文件夹的报错都是因为模块格式不匹配浏览器环境，直接忽略就行，专注用cdn/js下的文件就好

4. 关于你提到的TylerDahle的方案 #

他的思路和这个完全一致——就是用UMD格式的包，确保依赖顺序正确。你之前没成功就是漏了React的前置依赖，补上之后就能正常运行了。

最后提醒下，如果用的是Kendo React商业版，要确保你有合法授权，并且所有Kendo包用同一个大版本，避免版本不兼容问题。

内容的提问来源于stack exchange，提问作者Bondolin