modularisieren Reagieren Code: Gleiches Format, andere Funktion

Question

Ich habe eine einfache ToDo-Liste in React.

Ich habe eine Komponente für ein neues ToDo Element hinzufügen (z. B. Name, Titel, Datum, Ort, Beschreibung), und eine andere Komponente eines ToDo Objekt zu bearbeiten. jedoch

Die 2-Komponenten sind genau die gleiche, mit der Ausnahme, dass die Komponente bearbeitet mit Inhalt gefüllt ist.

Gibt es ich so, wie ich dies vereinfachen, zB. Verschachteln einer "general form" Komponente für die Edit und Add Component? Und sollte ich in Komponenten höherer Ordnung schauen?

Answer 1

Sie können zum Beispiel eine renderedTodo Komponente erstellen und die Eigenschaft isEditing übergeben. Und im Inneren machen Funktion richtige Komponente auswählen zu machen

class TodoItem extends React.Component { 
    render() { 
     const renderedTodo = this.props.isEditing ? (<EditingTodo>) : (<AddingTodo>); 
     return (
      <div> 
       <div>[Common structure]</div> 
       { renderedTodo } 
      </div> 
     ); 
    } 
} 

TodoItem auch alle gängigen Logik verwaltet, EditingTodo und AddingTodo nur logisch mit ihnen verwandt. Sie sollten reine Funktionen ohne Status sein und alles mit Hilfe von Requisiten aus TodoItem machen.