抛出的错误是:意外的标记,应为;(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
}
});
谢谢你的帮助。
4条答案
按热度按时间chhkpiq41#
你不应该使用
function renderNumbers()
吗?看起来renderNumbers
不是Counter
类的一个方法,而是你代码中的一个单独的函数。顺便说一句,
renderNumbers
被定义了两次,尽管它是合法的,而不是问题的原因。编辑:
如果你想把
renderNumbers()
声明为类Counter
的一个原型方法,那么在类内部定义它:否则,使用关键字
function
定义一个函数:这只是ES6的语法。
zvms9eto2#
您的组件遇到此错误的原因如下:1.如果在ES6类之外定义函数,则必须使用
function
关键字。但是,如果这样做,则在调用该函数时将未定义this
引用。2.如果在React组件(它只是一个ES6类)内部定义函数,则在函数定义前面不需要"function"关键字。备选办法1:
备选方案二:
您之所以会遇到您描述的错误,是因为Javascript编译器认为您是在"调用"而不是"定义"
renderNumbers()
。因此...它到达)
并期望一个换行符或;
,但它看到了{
并抛出错误。如果使用选项2调用
renderNumbers()
,请不要忘记使用this
关键字dz6r00yl3#
如果在一个基于函数的组件中,你声明函数(在返回之前),最好使用function关键字(这样它就不会抛出;必需错误)
osh3o9ms4#
如果您遇到类似以下情况: