反应 - 预期的意外令牌;

被抛出的错误是：意外的令牌，预计; （9:16）这指向renderNumbers（）函数的第一行。我的语法有什么问题？我有点困惑，为了让它工作，需要改变什么。反应 - 预期的意外令牌;

import React, { PropTypes } from 'react'; 
import { 
    StyleSheet, 
    View, 
    Text, 
    TouchableOpacity 
} from 'react-native'; 

renderNumbers() { 
    return this.props.numbers.map(n => 
    <Text>{n}</Text> 
); 
} 


export default class Counter extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.appName}> 
      Countly 
     </Text> 
     <Text style={styles.tally}> 
      Tally: {this.props.count} 
     </Text> 
     <Text style={styles.tally}> 
      Numbers: {this.props.numbers} 
     </Text> 
     <View> 
      {this.renderNumbers()} 
     </View> 
     <TouchableOpacity onPress={this.props.increment} style={styles.button}> 
      <Text style={styles.buttonText}> 
      + 
      </Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.props.decrement} style={styles.button}> 
      <Text style={styles.buttonText}> 
      - 
      </Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.props.power} style={styles.button}> 
      <Text style={styles.buttonText}> 
      pow 
      </Text> 
     </TouchableOpacity> 
     <TouchableOpacity onPress={this.props.zero} style={styles.button}> 
      <Text style={styles.buttonText}> 
      0 
      </Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

Counter.propTypes = { 
    count: PropTypes.number, 
    numbers: PropTypes.func, 
    increment: PropTypes.func, 
    decrement: PropTypes.func, 
    zero: PropTypes.func, 
    power: PropTypes.func 
}; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF' 
    }, 
    appName: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10 
    }, 
    tally: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 20, 
    fontSize: 25 
    }, 
    button: { 
    backgroundColor: 'blue', 
    width: 100, 
    marginBottom: 20, 
    padding: 20 
    }, 
    buttonText: { 
    color: 'white', 
    textAlign: 'center', 
    fontSize: 20 
    } 
});

谢谢你的帮助。

来源

2017-01-23 Wasteland

不应该使用function renderNumbers()？它看起来像renderNumbers不是Counter类的方法，而是代码中的单个函数。

btw，renderNumbers被定义了两次，虽然它是合法的而不是问题的原因。

编辑：

如果你想声明renderNumbers()为Counter类的prototype method，定义它的类内：

export default class Counter extends React.Component { 

    renderNumbers() { 
     ... 
    } 

    ... 

}

否则，使用关键字function定义function：

function renderNumbers() { 
    ... 
}

这只是ES6的语法。

来源

2017-01-23 21:21:24

对不起renderNumbers的两倍使用this关键字。这不是问题。在发布之前应该将其删除。 – Wasteland

@Wasteland只是检查我的第一句话。 –

是不是只用于无状态组件的“函数”一词？当它是一个类组件时，它应该是nameOfFunction（）{}。我对吗？ – Wasteland

组件出现此错误的原因是由于以下原因： 1.如果您在ES6类之外定义功能，则必须使用function关键字。如果你这样做，但是，当你调用该函数时，this引用将不确定。 2.如果你在一个React组件（它只是一个ES6类）中定义一个函数，你不需要在函数定义前面加上“function”关键字。

选项1：

function renderNumbers() { 
    return <Text>...</Text> 
} 

class Counter extends React.component { 
    render() { 
    /* Render code... */ 
    } 
}

选项2：

class Counter extends React.component { 
    renderNumbers() { 
    return <Text>...</Text> 
    } 
    render() { 
    /* Render code... */ 
    } 
}

你得到你所描述的错误的原因是因为JavaScript编译器认为你是 “打电话”，而不是 “定义” renderNumbers() 。所以...它到达)，并且期望换行符或;，但它看到{并引发错误。

不要忘记，如果您使用选项2调用renderNumbers()

来源

2017-01-23 21:42:31

反应 - 预期的意外令牌;

回答

相关问题