Question

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

import * as React from 'react';

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

但收到此错误消息：

错误TS2339：类型上不存在属性“大小” “DetailedHTMLProps＆LT; HTMLAttributes＆LT; HTMLDivElement＆gt;，HTMLDivElement＆gt;'。

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

理想情况下，最后一个是我首选的解决方案。我想在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- *属性类型。您可以更多地了解here。

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

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

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

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


属性名称不应包含任何大写字母，并且必须   在前缀＆＃34;数据 - ＆＃34;之后至少有一个字符。

属性值可以是任何字符串


注意：自定义属性前缀为＆＃34;数据 - ＆＃34;将被用户代理完全忽略。

您可以使用size="A4"

，而不仅仅使用data-size="A4"

示例

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

Answer 2

并不完全相关，但是说您想使用...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>
}

Answer 3

反应类型定义文件（默认情况下，当与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;
  }
}

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

可能相关的问题：

How do I add attributes to existing HTML elements in TypeScript/JSX?

Answer 4

如果您使用的是样式组件，则可以更简单地实现它：

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

type Custom = {
  version?: number
}

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

属性'DetailedHTMLProps，HTMLDivElement＆gt;'上不存在属性与React 16

4 个答案: