React HOCは匿名を返す_class

Question

私はMaterialUIを使用しています。具体的には、コンポーネントレベルで検証状態を扱うように飾るTextFieldコンポーネントです。

私は反応中のHOCについて知っています。これは、これには完璧と思われるパターンです。しかし、返される型はTextFieldの代わりに_classであるため、匿名クラスを返さなければならないため、TextFieldコンポーネントの値を返すことができません。

HOCパターンに問題がありますか、プロトタイプを変更せずにコンポーネントを再利用する最良の方法ではないでしょうか。どんな助けでも大歓迎です。

HOC宣言

export default function hocInputValidator(WrappedComponent){ 
    return class extends Component{ 
    constructor(props){ 
     super(props); 
    } 

    handleChange(){ 
     console.log('Handling from HOC'); 
    } 

    render(){ 
     return <WrappedComponent {...this.props}/> 
    } 
    } 
} 

呼び出しと飾らコンポーネント

export default hocInputValidator(TextField); 

のエクスポート私はrefs経由で装飾されたコンポーネントにアクセスしようとすると、タイプが_class代わりのTextFieldです。

Answer 1

HOCは、主にログインの例に関する懸案のクロスカットに使用されます。あなたのアプリの多くのコンポーネントがログイン機能を必要とするかもしれないので、それらを動的にHOCでラップすることができます。 HOCは、渡されたコンポーネントを単にラップします。あなたの場合、私はあなたのコードでいくつかの問題を考え出しました。私はそれらを以下に修正した。

export default function (WrappedComponent){ 
    class HocInputValidator extends Component{ 
     constructor(props){ 
      super(props); 
     } 

     handleChange(){ 
      console.log('Handling from HOC'); 
     } 

     render(){ 
      return <WrappedComponent {...this.props}/> 
     } 
     } 
     return HocInputValidator; 

} 

呼び出しは次のようなものでなければなりません。

import inputValidator from './components/input_validator'; 

inputvalidator(TextField);