Reagieren Komponente, unerwartetes Token Fehler

Question

Ich versuche, eine grundlegende Stoppuhr App zu erstellen, würde Ich mag meine Render-Funktion zum Aufräumen von Markup in verschiedene Methoden setzen, wie folgt aus:

export default class stopwatch extends Component { 
render() { 
return <View style={styles.container}> 
    <View style ={[styles.header, this.border('yellow')]}> 
    <View style={this.border('red')} > 
    <Text> 
    00.00.00 
    </Text> 
    </View> 
    <View style={this.border('green')} > 
     {this.startStopButton()} 
     {this.lapButton()} 
    </View> 
    </View> 
<View styles={[style.footer, this.border('blue')]}> 
    <Text> 
    List of Laps 
    </Text> 
</View> 
}, 

Ich mag würde meine render-Funktion von Markup in verschiedene Methoden setzen, wie dies aufzuräumen:

startStopButton: function(){ 
return <View> 
      <Text> 
      Start 
      </Text> 
     </View> 
}, 
lapButton: function(){ 
    return <View> 
     <Text> 
      Lap 
     </Text> 
     </View> 
} 


}; 

Allerdings halte ich die Fehler, unerwartete Toekn Linie 27 erhalten, welche diese Linie

ist

startStopButton: function(){ 
return <View> 

Irgendwelche Ideen was ist falsch damit?

Answer 1

Sie verwenden ES6 classes. Für Klassenmethoden verwenden Sie das Schlüsselwort function nicht. Außerdem folgen Methoden keine Kommas. Lassen Sie das Komma am Ende von render und startTopButton:

export default class stopwatch extends Component { 
    startStopButton() { 
    return <View> 
      <Text> 
       Start 
      </Text> 
      </View> 
    } 

    lapButton() { 
    return <View> 
      <Text> 
      Lap 
      </Text> 
     </View> 
    } 

    render() { 
    return <View style={styles.container}> 
    <View style ={[styles.header, this.border('yellow')]}> 
    <View style={this.border('red')} > 
     <Text> 
     00.00.00 
     </Text> 
     </View> 
    <View style={this.border('green')} > 
     {this.startStopButton()} 
     {this.lapButton()} 
    </View> 
    </View> 
    <View styles={[style.footer, this.border('blue')]}> 
    <Text> 
     List of Laps 
    </Text> 
    </View> 
    } 
} 

fallen