소품을 보존하면서 React 및 TypeScript에서 HTML 요소를 확장

Question

나는 내 생각에이 머리를 감쌀 수 없다. 아마도 반 번 시도했을 것이고 항상 any에 가야한다. 합법적 인 방법이 있는가? HTML 요소를 사용하여이를 구성 요소로 감싸고 HTML 구성 요소가 모든 요소를 ​​통과하도록 다른 구성 요소로 래핑하십시오. 기본적으로 HTML 요소를 사용자 정의 하시겠습니까? 예를 들어, 뭔가 같은 :

interface MyButtonProps extends React.HTMLProps<HTMLButtonElement> {} 
class MyButton extends React.Component<MyButtonProps, {}> { 
    render() { 
     return <button/>; 
    } 
} 

interface MyAwesomeButtonProps extends MyButtonProps {} 
class MyAwesomeButton extends React.Component<MyAwesomeButtonProps, {}> { 
    render() { 
     return <MyButton/>; 
    } 
} 

사용법 :

<MyAwesomeButton onClick={...}/> 

내가 작곡의이 종류를 시도 할 때마다, 나는 유사한 오류 얻을 : foo는이의

재산권 '심판' 대상 속성에 할당 할 수 없습니다.

Answer 1

당신은이 HTML 버튼 소품 반응 할 수 있도록 구성 요소의 정의를 변경할 수 있습니다

class MyButton extends React.Component<MyButtonProps & React.HTMLProps<HTMLButtonElement>, {}> { 
    render() { 
     return <button {...this.props}/>; 
    } 
} 

당신과 함께 버튼 소품을 입력 할 타이프 스크립트 컴파일러를 말할 것이다

'MyButtonProps'