reactjs – React – 意外的令牌,预期;

发布时间：2020-12-15 16:20:49 所属栏目：百科来源：网络整理

导读：抛出的错误是：意外的令牌,预期; (9:16) 这指向renderNumbers()函数的第一行.我的语法有什么问题？我对这里需要改变什么以使其工作有点困惑. import React,{ PropTypes } from 'react';import { StyleSheet,View,Text,TouchableOpacity} from 'react-native'

抛出的错误是：意外的令牌,预期; (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,padding: 20
  },buttonText: {
    color: 'white',fontSize: 20
  }
});

谢谢您的帮助.

解决方法

你不应该使用函数renderNumbers()？看起来renderNumbers不是类Counter的方法,而是代码中的单个函数.

顺便说一句,renderNumbers被定义了两次,虽然它是合法的而不是问题的原因.

编辑：

如果要将renderNumbers()声明为类计数器的prototype method,请在类中定义它：

export default class Counter extends React.Component {

    renderNumbers() {
       ...
    }

    ...

}

否则,使用关键字功能定义function：

function renderNumbers() {
    ...
}

这只是ES6的语法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!