'상세정보' 유형에 속성이 없습니다.HTMLDivElement' (HTMLDivElement) (Resact 16 탑재)

'상세정보' 유형에 속성이 없습니다.HTMLDivElement' (HTMLDivElement) (Resact 16 탑재)

React 16에서 커스텀 DOM 속성을 사용할 수 있게 되었기 때문에 Typescript 코드에서 이를 활용하려고 했습니다.

import * as React from 'react';

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

단, 다음 오류 메시지가 나타납니다.

오류 TS2339: 유형 'Detailed'에 'size' 속성이 없습니다.HTML Props <HTMLAttributes <HTMLDivElement>, HTMLDivElement>.

이 스레드는 다음 작업을 수행할 것을 제안합니다.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>

에러 메시지는 삭제되지만sizeAtribute는 컴파일된 코드에서 완전히 무시되어 다음과 같은 결과가 됩니다.

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

이상적으로는 마지막이 내가 선호하는 솔루션이다.를 사용하고 싶습니다.size커스텀 애트리뷰트와 함께page커스텀 태그

tsconfig.syslog

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

HTML은 커스텀아트리뷰트에 data-* 아트리뷰트 타입을 지원합니다.자세한 내용은 여기를 참조하십시오.

정의 및 사용 data-* 속성은 페이지 또는 응용 프로그램에 대한 사용자 지정 데이터를 저장하기 위해 사용됩니다.

data-* 속성을 통해 모든 HTML 요소에 커스텀 데이터 속성을 삽입할 수 있습니다.

저장된(커스텀) 데이터를 페이지의 JavaScript에서 사용하여 (Ajax 호출이나 서버 측 데이터베이스 쿼리 없이) 보다 매력적인 사용자 환경을 만들 수 있습니다.

data-* 속성은 다음 두 부분으로 구성됩니다.

• 특성 이름은 대문자일 수 없으며 접두사 "data-" 뒤에 하나 이상의 문자가 있어야 합니다.
• 속성 값은 임의의 문자열일 수 있습니다.

주의: "data-"가 앞에 붙는 커스텀 속성은 사용자 에이전트에 의해 완전히 무시됩니다.

그냥 쓰는 게 아니라size="A4"사용할 수 있습니다.data-size="A4"

예

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

반응 유형 정의 파일(기본값 -)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 요소에 속성을 추가하려면 어떻게 해야 합니까?

스타일 컴포넌트를 사용하는 경우 보다 심플하게 할 수 있습니다.

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

type Custom = {
  version?: number
}

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

완전히 관련이 있는 것은 아니지만 다음과 같은 확산 연산자를 사용하여 사용자 지정 구성 요소에 추가 속성을 허용하려고 합니다....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>
}

언급URL : https://stackoverflow.com/questions/46215614/property-does-not-exist-on-type-detailedhtmlprops-htmldivelement-with-react