在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 ( {/* 其他内容 */} );}
错误的尝试与原因分析
一种常见的错误尝试是在组件内部或文件顶部直接使用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"]; // 如果有其他自定义标签，也在此处声明 } }}
解析上述声明：
declare global { … }: 这段代码告诉TypeScript，其中的声明是全局性的，会影响整个项目的类型检查。namespace JSX { … }: 在全局范围内，我们进入JSX命名空间，这是React/JSX类型定义的核心。interface IntrinsicElements { … }: 这是我们要扩展的关键接口。通过在此处添加新的属性，我们告诉TypeScript哪些自定义标签是合法的。“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文件是更推荐的做法，因为这样可以集中管理所有全局类型声明。
src/types/custom.d.ts 文件内容：
// src/types/custom.d.tsdeclare 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 ( {/* Slider Revolution或其他自定义标签的内容 */} {/* Slide content */} );}
注意事项与最佳实践
类型安全性优于any: 尽可能使用JSX.IntrinsicElements[“div”]或JSX.IntrinsicElements[“span”]等具体类型，而不是any。这能让TypeScript在您使用这些自定义标签时提供更好的属性检查和智能提示。
声明位置: 将所有自定义标签的声明集中在一个或几个.d.ts文件中是最佳实践。这样可以避免在每个使用自定义标签的文件中重复声明，并提高代码的可维护性。
自定义属性: 如果您的自定义标签除了标准HTML属性外，还有自己特有的属性（例如data-version，data-title等），您可能需要更复杂的类型定义，而不仅仅是继承div。在这种情况下，您可以定义一个接口来描述这些属性，并将其与JSX.IntrinsicElements中的标签关联：
declare global { namespace JSX { interface CustomRsModuleAttributes extends React.HTMLAttributes { "data-version"?: string; } interface CustomRsSlideAttributes extends React.HTMLAttributes { "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标签的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537746.html
微信扫一扫 
支付宝扫一扫 
