导航
导航

【记录】React TS中自定义DOM属性

前言:最近在项目中进行渐进式重构升级,技术栈也是从之前的jQuery时代转换成React和TypeScript。当然重构过程中也冒出了不少的问题,本文将记录一下React TS中自定义DOM属性的一些解决方案。

先看一下需求

  • 在原生DOM节点新增自定义属性

比如:

1
<div mark="mark"></div>

在React中这样写是能正常渲染的,React官方对于自定义DOM属性也是有一篇文章特别说明,大致意思就是React 16之前对于未知的DOM属性。如果JSX具有React无法识别的属性,React只会跳过它,并不会渲染在DOM中,在React 16之后,进行了更改,所有未知属性都将最终出现在DOM中。

但是在TypeScript中这样写就会报错:

类型“DetailedHTMLProps<HTMLAttributes, HTMLDivElement>”上不存在属性“mark”

Google了一圈,在 stackoverflow 看到一个差不多的问题,尝试按照useful最多的这样声明:

1
2
3
4
5
declare module 'react' {
interface HTMLProps<T> {
mark?:string;
}
}

然而还是报相同的错误,未解决。

最后在一个Answer中找到了解决方案,测试可行:

1
2
3
4
5
declare module 'react' {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
mark?: string;
}
}

添加这句声明后能顺利的解决ts的报错,但这也不是最好的解决方案,这是为什么呢?在添加了这句声明后,发现我们在上面声明的图片格式失效报错了:

找不到模块“xxxxxx.png”或其相应的类型声明

这里就直接列举出我尝试后的解决方案,可能不是最好的,但目前可以解决上面的两个报错问题:

把自定义DOM属性类型声明和图片类型声明分开到不一样的.d.ts文件里,防止冲突报错

如果有更好的解决方案,欢迎交流探讨。

支持一下
扫一扫,支持hzzly
  • 微信扫一扫
  • 支付宝扫一扫