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


};

但是，我一直收到错误，Unexpected Toekn第27行就是这一行

 startStopButton: function(){
return <View>

任何想法都有错吗？

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

反应组件，意外的令牌错误

1 个答案: