92

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

4

11 に答える 11

-1

これを行うと、ボタンのプロパティを拡張できます

import { ButtonHTMLAttributes, ReactNode } from "react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
    children: ReactNode;
}

const Button = ({ children, ...props }: Props): JSX.Element => {
    return <button {...props}>{children}</button>;
};
于 2021-03-07T15:44:36.827 に答える