대응 유형 스크립트 - 사용자 지정 특성 추가

대응 유형 스크립트 - 사용자 지정 특성 추가

React Types 스크립트를 사용하여 사용자 지정 data-* 특성을 추가할 수 있습니다.하지만 'name' || 'test' act와 같은 사용자 지정 특성을 추가할 수 있습니까?

<span name="I'm causing a type error" data-test="I'm Working"/>

저는 볼드를 추가했습니다.

유형 오류:'{children: Element; name: string; data-test: string; }' 유형은 'Detailed' 유형에 할당할 수 없습니다.HTMLProps, HTMLSpanElement>.속성 'name'이(가) 'Detailed' 유형에 없습니다.HTMLProps, HTMLSpanElement>.TS232

"react": "^16.7.0",
"typescript": "^3.2.4",

다른 방법이 있습니다...정적 검사 건너뛰기(유형 스크립트가 동적으로 수행되지 않음)

{ 
  const allowedProps = {test: "not-data-attribute"}
  <span {...allowedProps}/>
}

16+ 반응에서 그것은 가능합니다, 참고하세요.

문제는 타자기가 그것에 대해 몰랐다는 것입니다(아직).

그러나 유형 검사를 위해 @ts ignore를 추가할 수 있습니다.

{ //@ts-ignore
  <span name="I'm causing a type error" data-test="I'm Working"/>
}

단순 추가 사용자 지정 특성 시작data-어떤 경우에는 당신이 시작할 수도 있습니다.aria-

<div data-attr={3} data-nothing="super">hover</div>

유형 스크립트가 해당 접두사가 있는 사용자 지정 특성을 알고 있는 것 같습니다. 이 링크를 확인하십시오.

확장명이 있는 파일 만들기.d.tsJSX 네임스페이스의 버튼 인터페이스를 확장하면 됩니다.리액트로 앰프 페이지를 만드는 데 사용하고 있습니다.

declare namespace JSX {
    interface ExtendedButton
        extends React.DetailedHTMLProps<
            React.ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement
        > {
        customAttribute?: string;
    }

    interface IntrinsicElements {
        button: ExtendedButton;
    }
}

언급URL : https://stackoverflow.com/questions/54869777/react-typescript-adding-custom-attribute