React 16 类型“DetailedHTMLProps，HTMLDivElement>”上不存在属性

IT技术 reactjs typescript
2021-03-29 19:27:36

由于 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定义标签旁边使用自定义属性。

配置文件

{
  "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
  }
}
4个回答

HTML 支持自定义属性的 data-* 属性类型。您可以在此处阅读更多相关信息。

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

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

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

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

  • 属性名称不能包含任何大写字母，并且必须在前缀“data-”之后至少有一个字符长
  • 属性值可以是任何字符串

注意：以“data-”为前缀的自定义属性将被用户代理完全忽略。

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

例子

<div className="page" data-size="A4">
  // ....
</div>
就像我说的，我对 TypeScript 不太了解。可能有更好的解释。不过谢谢你的点赞
2021-06-16 19:27:36
它有效，但我不确定这是完整的解释：我尝试了 page-size 而不是 data-size 并且它也有效。我尝试使用“-”的任何名称似乎都有效，就好像 Typescript 忽略了警告并强制编译一样。谢谢！
2021-06-20 19:27:36

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 元素添加属性？

我尝试导入 AriaAttributes、DOMAttributes 但得到Circular definition of import alias 'AriaAttributes'了另一个导入的相同错误
2021-06-18 19:27:36

如果您使用样式组件，您可以更简单地做到：

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

type Custom = {
  version?: number
}

const StyledDiv = styled.div<Custom>`
  // styles
`
太感谢了！
2021-06-14 19:27:36

不完全相关，但假设您想在自定义组件中接受额外的属性，使用像...rest. 这是你如何做到的：

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>
}
其它你可能感兴趣的问题
上一篇在react应用程序中动态地将样式属性添加到 css 类 下一篇如何在 ReactJS 中输出文本而不将其包装在 span 中