导航
导航

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

2021.04.16 hzzly

前言：最近在项目中进行渐进式重构升级，技术栈也是从之前的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文件里，防止冲突报错

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