2016-11-21 6 views
4

私はちょうど半分ダースタイムを試しましたが、いつもanyに頼っています...正当な方法がありますか? HTML要素を使用してコンポーネント内にラップし、別のコンポーネントでラップして、HTMLプロップがすべてを通過するようにします。基本的にHTML要素をカスタマイズしていますか?例えば、のようなもの:小道具を保存している間にReactとTypeScriptで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={...}/> 

Iは、組成物のこの種を試みるたびに、私のようなエラーが出る:

のfooのプロパティ 'refは' ですターゲットプロパティに割り当てることはできません。

+0

と一緒にボタンの小道具を入力したいtypescriptですコンパイラを教えてくれます反応するHTMLボタンの小道具

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

を許可するように構成要素の定義を変更することができます高次コンポーネント(コンポーネントファクトリ)を探しています。オンラインでチェックし、あなたが求めているものに合っているかどうかを確認してください。これらは基本的に「コンポーネントファクトリ」であり、コンポーネントを別のコンポーネントにラップして初期コンポーネントを返すことができますが、新しいまたは変更されたバージョンを返すことができます。 – ZekeDroid

+0

エラーはコンパイル時(コンパイル時)ですか?なぜなら、 'tsc'コマンドを使ってコードをコンパイルしようとしていて、うまく動作しているからです。私は ' console.log( 'Clicked')} />' – Leone

+0

をレンダリングしようとしました。あなたのネイティブ(HTML)

答えて

3

あなたは「MyButtonProps」

関連する問題