在React/JSX中直接使用非标准HTML标签（如Slider Revolution的`rs-fullwidth-wrap`）会导致TypeScript报错，因为它不识别这些标签。本文将详细介绍如何通过在全局`JSX.IntrinsicElements`接口中正确声明这些自定义标签，从而解决“Property 'rs-fullwidth-wrap' does not exist on type 'JSX.IntrinsicElements'”错误，确保自定义标签在React组件中能被TypeScript正确识别和使用。

理解问题：JSX与自定义标签

当您在React组件的JSX中尝试使用如这样的自定义标签时，TypeScript会报错，提示“Property 'rs-fullwidth-wrap' does not exist on type 'JSX.IntrinsicElements'”。这是因为TypeScript在编译JSX时，会根据JSX.IntrinsicElements接口来检查所有HTML标签的有效性。这个接口默认包含了所有标准的HTML标签（如div, span, p等）。对于任何不在这个接口中定义的标签，TypeScript都会认为它们是无效的，从而抛出类型错误。

例如，以下代码片段会触发上述错误：

import React from 'react';

export default function Home() {
    return (
        <main className="site-main">
            <rs-fullwidth-wrap
                id="rev_slider_2_1_forcefullwidth"
                style={{ marginTop: '0px', marginBottom: '0px' }}
            >
                {/* 其他内容 */}
            </rs-fullwidth-wrap>
        </main>
    );
}

错误的尝试与原因分析

一种常见的错误尝试是在组件内部或文件顶部直接使用declare namespace JSX来声明：

// 这种方式通常不会生效
declare namespace JSX {
    interface IntrinsicElements {
        'rs-fullwidth-wrap': any;
        'rs-module-wrap': any;
    }
}

这种声明方式之所以无效，是因为它创建了一个局部的JSX命名空间。TypeScript需要的是对全局JSX.IntrinsicElements接口的扩展，以便在整个项目中识别这些自定义标签。局部声明无法覆盖全局的类型定义。

正确的解决方案：扩展全局JSX.IntrinsicElements

要解决这个问题，您需要通过declare global语法来扩展全局的JSX.IntrinsicElements接口。这告诉TypeScript，您正在为整个项目添加新的固有元素定义。

正确的声明方式如下：

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "rs-fullwidth-wrap": JSX.IntrinsicElements["div"];
      "rs-module-wrap": JSX.IntrinsicElements["div"]; // 如果有其他自定义标签，也在此处声明
    }
  }
}

解析上述声明：

1. declare global { ... }: 这段代码告诉TypeScript，其中的声明是全局性的，会影响整个项目的类型检查。
2. namespace JSX { ... }: 在全局范围内，我们进入JSX命名空间，这是React/JSX类型定义的核心。
3. interface IntrinsicElements { ... }: 这是我们要扩展的关键接口。通过在此处添加新的属性，我们告诉TypeScript哪些自定义标签是合法的。
4. "rs-fullwidth-wrap": JSX.IntrinsicElements["div"];:
   • "rs-fullwidth-wrap": 这是您要声明的自定义标签名称。请注意使用字符串字面量。
   • JSX.IntrinsicElements["div"]: 这是一个非常重要的部分。它告诉TypeScript，rs-fullwidth-wrap这个自定义标签应该拥有与标准HTML div元素相同的属性类型。这意味着您可以在rs-fullwidth-wrap上使用id, className, style等所有div支持的属性，并且TypeScript会进行相应的类型检查。相比于使用any，这种方式提供了更好的类型安全性。如果您不确定它应该像哪个标准元素，或者它有非常特殊的属性，您也可以使用any，但通常推荐继承一个接近的HTML元素类型。

完整示例与应用

将上述声明放置在一个.d.ts文件（例如src/types/custom.d.ts或global.d.ts）中，或者放在您组件文件（如果只在该文件使用且不希望创建额外文件）的顶部（在import语句之后，但在组件定义之前）。将它放入单独的.d.ts文件是更推荐的做法，因为这样可以集中管理所有全局类型声明。

瑞志企业建站系统(ASP版)2.2

支持模板化设计，基于标签调用数据 支持N国语言，并能根据客户端自动识别当前语言 支持扩展现有的分类类型，并可修改当前主要分类的字段 支持静态化和伪静态 会员管理功能，询价、订单、收藏、短消息功能 基于组的管理员权限设置 支持在线新建、修改、删除模板 支持在线管理上传文件 使用最新的CKEditor作为后台可视化编辑器 支持无限级分类及分类的移动、合并、排序 专题管理、自定义模块管理 支持缩略图和图

0 查看详情

src/types/custom.d.ts 文件内容：

// src/types/custom.d.ts
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "rs-fullwidth-wrap": JSX.IntrinsicElements["div"];
      "rs-module-wrap": JSX.IntrinsicElements["div"];
      // 添加其他Slider Revolution或自定义标签
      "rs-module": JSX.IntrinsicElements["div"];
      "rs-slide": JSX.IntrinsicElements["div"];
      // ...
    }
  }
}

确保您的tsconfig.json文件包含了这些.d.ts文件。通常，如果它们在src目录下，并且include配置正确，TypeScript会自动识别。

// tsconfig.json
{
  "compilerOptions": {
    // ...其他配置
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "target": "es5",
    "baseUrl": "./",
    "paths": {
      // ...
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/types/**/*.d.ts"], // 确保包含您的d.ts文件
  "exclude": ["node_modules"]
}

现在，您的React组件就可以无报错地使用这些自定义标签了：

import React from 'react';

// 注意：如果您的声明在单独的.d.ts文件中，这里不需要再次声明
// declare global { ... }

export default function Home() {
    return (
        <main className="site-main">
            <rs-fullwidth-wrap
                id="rev_slider_2_1_forcefullwidth"
                style={{ marginTop: '0px', marginBottom: '0px' }}
            >
                {/* Slider Revolution或其他自定义标签的内容 */}
                <rs-module-wrap>
                    <rs-module data-version="6.0">
                        <rs-slides>
                            <rs-slide data-title="Slide 1" data-thumb="path/to/thumb.jpg">
                                {/* Slide content */}
                            </rs-slide>
                        </rs-slides>
                    </rs-module>
                </rs-module-wrap>
            </rs-fullwidth-wrap>
        </main>
    );
}

注意事项与最佳实践

1. 类型安全性优于any: 尽可能使用JSX.IntrinsicElements["div"]或JSX.IntrinsicElements["span"]等具体类型，而不是any。这能让TypeScript在您使用这些自定义标签时提供更好的属性检查和智能提示。

2. 声明位置: 将所有自定义标签的声明集中在一个或几个.d.ts文件中是最佳实践。这样可以避免在每个使用自定义标签的文件中重复声明，并提高代码的可维护性。

3. 自定义属性: 如果您的自定义标签除了标准HTML属性外，还有自己特有的属性（例如data-version，data-title等），您可能需要更复杂的类型定义，而不仅仅是继承div。在这种情况下，您可以定义一个接口来描述这些属性，并将其与JSX.IntrinsicElements中的标签关联：

   declare global {
     namespace JSX {
       interface CustomRsModuleAttributes extends React.HTMLAttributes<HTMLDivElement> {
         "data-version"?: string;
       }
   
       interface CustomRsSlideAttributes extends React.HTMLAttributes<HTMLDivElement> {
         "data-title"?: string;
         "data-thumb"?: string;
       }
   
       interface IntrinsicElements {
         "rs-fullwidth-wrap": JSX.IntrinsicElements["div"];
         "rs-module-wrap": JSX.IntrinsicElements["div"];
         "rs-module": CustomRsModuleAttributes; // 使用自定义属性接口
         "rs-slide": CustomRsSlideAttributes;   // 使用自定义属性接口
       }
     }
   }

   这样，在使用时，TypeScript就能识别data-version属性了。

总结

在React/JSX中使用非标准HTML标签时，TypeScript的类型检查机制要求我们明确声明这些标签。通过在全局JSX.IntrinsicElements接口中添加相应的定义，并建议继承一个合适的标准HTML元素类型（如div），我们可以有效地解决“Property '...' does not exist on type 'JSX.IntrinsicElements'”的错误。这种方法不仅确保了代码的正常运行，也维护了TypeScript带来的类型安全性和开发体验。

以上就是在React/JSX组件中声明和使用自定义HTML标签的详细内容，更多请关注其它相关文章！

相关文章： UC浏览器网页版登录入口官网 电脑版网址入口  哔哩哔哩忘记密码了怎么找回_哔哩哔哩密码找回方法  使用CSS更改登录屏幕输入框中PNG图标颜色的策略与局限性  处理动态列数据：J*a ArrayList的正确初始化与字符累加教程  抖音创作助手登录入口_抖音创作辅助工具官网直达  HTML转PPT成品工具有哪些？HTML网页转PPT成品工具大全  Go语言中JSON数据解码与字段访问指南  德邦快递查询平台 德邦快递物流信息查询入口  Composer如何解决json扩展缺失的错误  mysql密码锁定怎么解锁_mysql密码锁定解锁后修改密码步骤  html怎么运行外部js文件中的函数_运html外js文件函数法【技巧】  Django通过AJAX异步上传图片并保存至模型的完整指南  J*aScript打印功能_j*ascript输出控制  在J*a中如何开发在线活动报名与管理系统_活动报名管理项目实战解析  学习通网页版官方登录 超星学习通电脑端入口指南  小红书怎么解除第三方平台绑定_小红书多平台登录解绑方法介绍  AO3最新镜像入口 Archive of Our Own官方平台访问  12306选座怎么选到特殊座位_12306特殊座位选择注意事项  随机参数递归函数的基准调用次数与时间复杂度探究  React/Next.js中实现列表项的动态选择与移动  QQ邮箱网页版入口页面 QQ邮箱在线登录入口官网  京东京造J1和网易云音乐氧气真无线有什么不同_国产电商蓝牙耳机音质对比  MAC怎么安装Homebrew包管理器_MAC为开发者和高级用户安装命令行工具  C++如何检测键盘输入_C++ _kbhit与_getch函数非阻塞输入  基于动态规划的房屋花卉种植最小成本算法详解  微信网页版官方快速登录入口 微信网页版网页版账号直达  PHP：根据嵌套关联数组项值动态添加新键值对  Win10系统服务哪些可以禁用 Win10安全优化服务列表【干货】  cad如何更改注释性对象的比例_cad注释性比例调整方法  包子漫画官方网站阅读入口-包子漫画在线漫画官网直达链接  J*a TimerTask文件监控：HashMap状态管理与常见陷阱规避指南  vivo手机互传视频怎么操作_vivo手机互传视频详细传输方法  Composer的 archive 命令怎么用_快速打包你的PHP项目及其Composer依赖  必由学在线入口 必由学网页版快速登录入口  PHP教程：高效从URL路径中提取倒数第二个片段  PHP基于会话的用户类型页面访问控制指南  J*aScript类型检查_j*ascript代码规范  Lar*el Form Request中唯一性验证在更新操作中的正确实现  大象笔记网页版入口 印象笔记网页版登录入口  Win11怎么开启省电模式_Win11电池节电模式自动开启  《噬血代码2》新预告片发布 展示游戏剧情  深入理解Go语言中的指针类型：以*string为例  PHP字符串中复杂变量插值的最佳实践与语法解析  Composer如何处理Git子模块（submodule）依赖_Composer与Git Submodule的对比与选择  腾讯QQ邮箱官方网站_QQ邮箱网页版在线登录  CSS图片焦点样式实现教程：理解与应用tabindex属性  知音漫客正版漫画平台_知音漫客官网账号登录  FullCalendar 自定义按钮样式定制指南  Windows7怎么硬盘安装 Windows7提取ISO镜像到非系统盘并运行setup.exe实现硬盘直装【教程】  如何创建没有密码的Windows本地账户_跳过微软账户登录的技巧【教程】