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

piok6c0g 于 2023-01-27 发布在 TypeScript

关注(0)|答案(2)|浏览(146)

我需要一个React prop来处理React组件的HTML div元素部分的所有可能的html属性，但是我在Typescript严格性与React可能性方面遇到了问题。
以下是组件：

import React from 'react'

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

...

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

这里是提供给组件的属性常量：

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)

解决这个问题的最佳方案是什么？非常感谢

typescript

来源：https://stackoverflow.com/questions/71663377/which-is-the-best-way-to-define-the-type-of-dynamic-data-attributes-in-a-react-c

2条答案

按热度按时间

jslywgbw1#

针对TypeScript 4.1以上版本的更新：

Template Literals的引入允许我们创建一个同时接受HTMLAttributes和自定义data-*属性的类型：

type DivAttrs = {
  container?: React.HTMLAttributes<HTMLDivElement> & {[dataAttibute: `data-${string}`]: string}
}

以前的解决方案

data-custom-attribute和data-random-attribute属性不存在于React.HTMLAttributes类型或任何预先存在的类型中，因此最好的办法是将现有的React.HTMLAttributes类型（仍然可以访问公共的HTMLDivElement元素属性）与您自己的CustomAttrs相结合：

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

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

赞(0）回复(0）举报 2023-01-27

bvn4nwqk2#

我们可以在prop的类型中添加索引签名。

type DivAttrs = {
  container?: React.HTMLAttributes<HTMLDivElement> & { [x: string]: any},
}

赞(0）回复(0）举报 2023-01-27

我来回答

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

2条答案

相关问题

热门标签

最新问答