React Destrukturierung umbenennen

Question

Hier ist das Ziel

Von einem app/Modul, das mit create-react-app nicht

erstellt hat

class Hoc extends React.Component { 
    render() { 
    const {component: Component} = this.props 
    return (
     <div> 
     <Component /> 
     </div> 
    ) 
    } 
} 

Beschreibung:

Verwenden Grund ES6 Destrukturierung mit Umbenennungs so dass Das react-Element kann anstelle einer Variablen <Component /> als {component} referenziert werden.

Ich habe dies erfolgreich in einer App aus create-react-app erstellt. Diese Syntax ist im Buch fullstack react dokumentiert. Dieses Problem tritt in zwei Modulen für reaktive Module auf, an denen ich arbeite und die nicht aus create-react-app erstellt wurden.

Der wahrscheinlichste Täter ist ein fehlendes Babel-Plugin. Die Anwendung, in der das Programm läuft, wurde ausgeworfen, so dass ich alle Abhängigkeiten und Plugins sehen kann, aber ich konnte keins identifizieren, das dafür funktioniert.

Hmmm, möglicherweise wird es von einem der Reaktionskripte gehandhabt, die nur mit create-react-app kommen.

.babelrc

{ 
    "presets": ["es2015", "stage-2", "react"], 
    "plugins": [ 
    "add-module-exports" 
    ] 
} 

Edit:

Dies ist ein ein Beispiel für die nackten Mindestanforderungen um das Problem zu zeigen gelöst werden. Seitenschrittlösungen wie this.props.children und {React.cloneElement(this.props.component, {...this.props})} sind keine Lösungen für das spezifische Problem. Prost!

Answer 1

Wenn Sie versuchen, eine Komponente höherer Ordnung zu erstellen (was ich vermute, wenn Sie Ihre Komponente Hoc aufgerufen haben), dann sollten Sie die Dokumentation hier folgen: https://reactjs.org/docs/higher-order-components.html.