web-dev-qa-db-ja.com

小道具を保持しながらReactおよびTypeScriptでHTML要素を拡張する

私はこれに頭を包むことができないと思います、おそらく半ダース回試してみて、常に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のプロパティ 'ref'はターゲットプロパティに割り当てることができません。

reactjstypescripttsx
28
Josh

コンポーネントの定義を変更して、反応するHTMLボタンの小道具を許可することができます

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

TypeScriptコンパイラーに、ボタンの小道具を「MyButtonProps」と一緒に入力するように指示します。

30
Jordan Upham

上記のような答えは時代遅れのようです。 @AlexMのソリューションが機能します。

私の場合、スタイル付きコンポーネントを機能コンポーネントでラップしていますが、通常のHTMLボタンプロパティを公開したいのです。

export const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>> = ({ children, icon, ...props}) => ( 
  <StyledButton { ...props}>
     { icon && (<i className = "material-icons" >{icon}< /i>)} 
     {children} 
   </StyledButton>);
0
EimerReis