在 React 组件中定义动态数据属性类型的最佳方式是什么？

Question

我需要一个 React 道具来处理 React 组件的 HTML div 元素部分的所有可能的 html 属性，但我遇到了 Typescript 严格性问题与 React 的可能性。

这里的组件：

import React from 'react'

type DivAttrs = {
  container?: React.HTMLAttributes<HTMLDivElement>
}

...

<div {...divAttributes?.container}>

这里是提供给组件的 prop const：

const divAttributes: DivAttrs = {
  container: {
    'aria-describedby': 'test',
    'data-custom-attribute': 'test',
    'data-random-attribute': 'test',
    id: 'test'    
  }
}

道具 data-custom-attribute 和 data-random-attribute 给出了这些错误

(property) 'data-custom-attribute': string
Type '{ 'aria-describedby': string; 'data-custom-attribute': string; 'data-random-attribute': string; id: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Object literal may only specify known properties, and ''data-custom-attribute'' does not exist in type 'HTMLAttributes<HTMLDivElement>'.(2322)

解决此问题的完美解决方案是什么？非常感谢

Answer 1

data-custom-attribute 和 data-random-attribute 属性在 React.HTMLAttributes 类型中不存在，因此您将无法使用它。此外，data-custom-attribute 和 data-random-attribute 未在任何 HTML 元素中使用，因此您最好的选择是组合现有的 React.HTMLAttributes 类型（仍然可以访问常见的 HTMLDivElement 元素属性）与您自己的 CustomAttrs 以便能够为您的用例使用特定的属性：

interface CustomAttrs {
  'data-custom-attribute': string;
  'data-random-attribute': string;
}

type DivAttrs = {
  container?: React.HTMLAttributes<HTMLDivElement> & CustomAttrs,
}

在 React 组件中定义动态数据属性类型的最佳方式是什么？

Which is the best way to define the type of dynamic data-attributes in a React component?

javascript

reactjs

typescript

typeerror

custom-data-attribute