reactjs 属性不存在于类型'DetailedHTMLProps，HTMLDivElement>'与React 16

qkf9rpyu 于 2023-04-29 发布在 React

关注(0)|答案(5)|浏览(253)

由于React 16现在允许custom DOM attributes，我试图在我的Typescript代码中利用它：

import * as React from 'react';

<div className="page" size="A4">
</div>

但收到此错误消息：
错误TS2339：属性“size”在类型“DetailedHTMLProps〈HTMLAttributes< HTMLDivElement>，HTMLDivElement〉”上不存在。
这个thread建议做一个module augmentation，所以我尝试了这个方法：

import * as React from 'react';

declare module 'react' {
     interface HTMLProps<T> {
        size?:string;
    }    
}

相同的错误消息。
最后，我还尝试将page声明为一个新的HTML标记：

declare global {
  namespace JSX {
    interface IntrinsicElements {
      page: any
    }
  }
}

<page className="page" size="A4">
</page>

它消除了错误消息，但size属性在编译后的代码中被完全忽略，我最终得到：

<page className="page">
</page>

理想情况下，最后一个是我的首选解决方案。我想在page自定义标记旁边使用size自定义属性。
tsconfig.js

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "allowUnusedLabels": true,
    "allowUnreachableCode": true
  }
}

reactjs

来源：https://stackoverflow.com/questions/46215614/property-does-not-exist-on-type-detailedhtmlprops-htmldivelement-with-react

5条答案

按热度按时间

erhoui1w1#

HTML支持自定义属性的data-* 属性类型。你可以阅读更多here。

定义和用法data-* 属性用于存储页面或应用私有的自定义数据。

data-* 属性使我们能够在所有HTML元素上嵌入自定义数据属性。
然后可以在页面的JavaScript中使用存储的（自定义）数据来创建更吸引人的用户体验（无需任何 AJAX 调用或服务器端数据库查询）。
data-* 属性由两部分组成：

属性名称不应包含任何大写字母，并且必须在前缀“data-”之后至少有一个字符长
属性值可以是任何字符串
**注意：**用户代理会完全忽略以data-为前缀的自定义属性。

除了使用size="A4"之外，还可以使用data-size="A4"

示例

<div className="page" data-size="A4">
  // ....
</div>

赞(0）回复(0）举报 2023-04-29

gorkyyrv2#

React类型定义文件（默认情况下为create-react-app）包含所有标准HTML元素以及已知属性的列表。
为了允许自定义HTML属性，你需要定义它的类型。通过扩展HTMLAttributes接口来实现：

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    custom?: string;
  }
}

可能相关的问题：
如何在TypeScript/JSX中向现有HTML元素添加属性？

赞(0）回复(0）举报 2023-04-29

ozxc1zmp3#

如果你使用的是styled-components，你可以做得更简单：

const App = props => {
  return <StyledDiv version={2.0}>My custom div</StyledDiv>
}

type Custom = {
  version?: number
}

const StyledDiv = styled.div<Custom>`
  // styles
`

赞(0）回复(0）举报 2023-04-29

piwo6bdm4#

不完全相关，但假设您希望在自定义组件中接受额外的属性，使用...rest这样的spread操作符。你应该这样做：

interface Props{
  icon?: string; 
}

type Button = Props & React.HTMLProps<HTMLButtonElement> & React.HTMLAttributes<HTMLButtonElement>;

function Button({ 
  icon,
  ...rest
}: Button) {
  return (
    <button 
      {...rest}
    >
     {icon && <span>{icon}</span>}
     {children}       
    </button>
}

赞(0）回复(0）举报 2023-04-29

r55awzrz5#

size是一个标准的HTML属性，定义为数字，可以使用