React HOC gibt eine anonyme _class zurück

Question

Ich verwende MaterialUI, genauer gesagt die TextField Komponente, die ich irgendwie dekorieren möchte, um den Validierungsstatus auf Komponentenebene zu behandeln.

Ich weiß über die HOC in reagieren, das ist ein Muster, das perfekt dafür scheint. Aber ich muss eine anonyme Klasse zurückgeben und daher kann ich den Wert der TextField Komponente nicht erhalten, wie ich sollte, weil der zurückgegebene Typ _class anstelle von TextField ist.

Mache ich etwas falsch mit dem HOC-Muster, oder vielleicht ist dies nicht der beste Weg, eine Komponente ohne Änderung des Prototyps wiederzuverwenden. Jede Hilfe würde sehr geschätzt werden.

Die HOC Erklärung

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

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

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

Der Aufruf und die dekorierten Komponente Export

export default hocInputValidator(TextField); 

Wenn ich versuche, die dekorierte Komponente über refs zugreifen zu können, ist die Art _class statt TextField.

Answer 1

HOCs werden hauptsächlich für das Durchschneiden von Anliegen für ein Beispiel verwendet. Für viele Komponenten in Ihrer App ist möglicherweise die Anmeldefunktion erforderlich, sodass Sie sie dynamisch mit einer HOC-Datei umschließen können. Ein HOC wird nur umhüllen, was auch immer für die Komponente verwendet wird. In Ihrem Fall habe ich einige Probleme in Ihrem Code herausgefunden. Ich habe sie unten behoben.

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; 

} 

Der Aufruf sollte in etwa so sein.

import inputValidator from './components/input_validator'; 

inputvalidator(TextField);