コンポーネントは、予期しないトークンエラー

Question

が、私は基本的なストップウォッチアプリを作成しようとしています反応して、私はこのように、さまざまな方法にマークアップを置くことによって、私のレンダリング機能を整理したいと思います：

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> 
}, 

は私がしたいですこのように、さまざまな方法にマークアップを置くことによって、私のレンダリング機能を整理するために：

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


}; 

しかし、私はこの行が

startStopButton: function(){ 
return <View> 

あるエラーを取得し、予期しないToeknライン27を保ちます

何か問題がありますか？

Answer 1

ES6 classesを使用しています。クラスメソッドの場合、functionキーワードは使用しません。また、メソッドにはカンマが付きません。 renderと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> 
    } 
}