使用React 16的"DetailedHTMLProps,HTMLDivElement>"类型中不存在属性

Question

由于React 16现在允许自定义DOM属性,我试图在我的Typescript代码中利用它:

import * as React from 'react';

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

但收到此错误消息:

错误TS2339:类型'DetailedHTMLProps <HTMLAttributes <HTMLDivElement>,HTMLDivElement>'上不存在属性'size'.

这个帖子建议做一个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>

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

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
  }
}

Answer 1

HTML支持自定义属性的data-*属性类型.你可以在这里阅读更多内容.

定义和用法 data-*属性用于存储页面或应用程序专用的自定义数据.

data-*属性使我们能够在所有HTML元素上嵌入自定义数据属性.

然后,可以在页面的JavaScript中使用存储的(自定义)数据来创建更具吸引力的用户体验(无需任何Ajax调用或服务器端数据库查询).

data-*属性由两部分组成:

• 属性名称不应包含任何大写字母,并且必须至少在前缀"data-"之后一个字符.
• 属性值可以是任何字符串

注意:用户代理将完全忽略以"data-"为前缀的自定义属性.

而不仅仅是使用size="A4"你可以使用data-size="A4"

例

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

Answer 2

React 类型定义文件（默认情况下 -index.d.ts以开头时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 元素添加属性？

Answer 3

如果您使用样式化组件，则可以更简单：

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

type Custom = {
  version?: number
}

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

Answer 4

不完全相关，但假设您想在自定义组件中接受额外的属性，使用扩展运算符，如...rest. 这里\xc2\xb4s 你是如何做到的：

\n\n

interface Props{\n  icon?: string; \n}\n\ntype Button = Props & React.HTMLProps<HTMLButtonElement> & React.HTMLAttributes<HTMLButtonElement>;\n\nfunction Button({ \n  icon,\n  ...rest\n}: Button) {\n  return (\n    <button \n      {...rest}\n    >\n     {icon && <span>{icon}</span>}\n     {children}       \n    </button>\n}\n

\n