Wann und wo eine React-Komponente in eine separate Datei trennen? Wann sollte es in der gleichen Datei gemacht werden?

Question

Nehmen wir an, wir müssen ein Auswahlfeld in einem Formular ausgeben. Sie müssen die Auswahloptionen basierend auf den an die Komponente übergebenen Daten festlegen.

Wenn es6 Klassen verwenden, stellen wir ein Verfahren in der gleichen Datei, um sie anzuzeigen, wie diese verwenden:

selectForm() { 
    <input ....> 
    this.props.data.map((data) => { 
    option... 
    }) 
} 

render() { 
    return (
    <div> 
     {this.selectForm()} 
    </div> 
) 
} 

wir auch diese in eine separate Datei hinzufügen können, importieren Sie es als separates Bauteil es und verwenden in dieser Datei wie folgt:

render() { 
    return (
    <div> 
     <SelectField data={this.props.data}> 
    </div> 
) 
} 

Von den zwei Optionen, was ist die empfohlene Vorgehensweise?

Answer 1

Wenn Sie die Komponente wiederverwenden möchten (in select Fall würden Sie sicherlich) dann schreiben Sie es in einer separaten Datei und importieren Sie es. Wenn es sich nur um eine App-spezifische Komponente handelt, tun Sie dies in der App-Komponente selbst (Methode 1 in Ihrem Beispiel). Lesen Sie mehr über wiederverwendbare Komponenten hier: https://facebook.github.io/react/docs/reusable-components.html