私はこれに頭を包むことができないと思います、おそらく半ダース回試してみて、常に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'はターゲットプロパティに割り当てることができません。
コンポーネントの定義を変更して、反応するHTMLボタンの小道具を許可することができます
class MyButton extends React.Component<MyButtonProps & React.HTMLProps<HTMLButtonElement>, {}> {
render() {
return <button {...this.props}/>;
}
}
TypeScriptコンパイラーに、ボタンの小道具を「MyButtonProps」と一緒に入力するように指示します。
上記のような答えは時代遅れのようです。 @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>);