Anbringen Requisiten auf einer staatenlos Funktion von Requisiten

Question

Ich baue eine Komponente reagieren, die in einer Komponente nimmt (PropTypes.func oder PropTypes.element) durch prop component={MyTemplate}, die als Vorlage dienen, ähnlich wie react-router tut Route Definitionen.

Innerhalb der Komponente möchte ich Requisiten an das component Element befestigen. Durch die Dokumente verstehe ich, dass ich cloneElement verwenden soll, um Requisiten daran zu befestigen.

class MyComponent extends Component { 
    // ... 

    render() { 
    const {component, blockProps} = this.props; 
    const body = cloneElement(component, blockProps); 

    return (
     <div className="sortable-block__body"> 
     {body} 
     </div> 
    ); 
    } 
} 

// later when rendering the component 
<MyComponent component={component} ... /> 

wenn die Komponente Rendering React wirft Invariant Verletzung:

Uncaught Invariant Verletzung: Elementtyp ist ungültig: a string (für Einbauten) zu erwarten oder eine Klasse/Funktion (für Verbundbauteile) aber bekam: undefiniert.

Nicht cloneElement betrachten zustandslose Funktionen als ReactElement? Wenn nicht, wie verwalte ich das Hinzufügen von Requisiten der zustandslosen Komponente?

Answer 1

Der Property element erwartet ein Element, das wie <MyTemplate /> ist - also mit Requisiten. Aber Sie akzeptieren einen Elementkonstruktor (MyTemplate).

, auch eine Instanz von Konstruktor zu erstellen, müssen Sie nicht cloneElement benötigen, verwenden Sie die JSX Syntax statt (und die Variable Kapital):

const Component = this.props.component; 
const body = <Component {...blockProps} />