Reagieren - unerwartetes Token, erwartet;

Question

Der Fehler, der ausgelöst wird, ist: Unerwartetes Token, erwartet; (9:16) Dies zeigt auf die erste Zeile der renderNumbers() -Funktion. Was ist falsch an meiner Syntax? Ich bin ein wenig verwirrt darüber, was hier geändert werden muss, damit es funktioniert.

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

Vielen Dank für Ihre Hilfe.

Answer 1

Sollten Sie nicht function renderNumbers() verwenden? Es sieht aus wie renderNumbers ist keine Methode der Klasse Counter, sondern eine individuelle Funktion in Ihrem Code.

Btw, renderNumbers wurde zweimal definiert, obwohl es legal ist und nicht die Ursache des Problems.

Edit:

Wenn Sie renderNumbers() als prototype method der Klasse deklarieren möchten Counter, definieren sie innerhalb der Klasse:

export default class Counter extends React.Component { 

    renderNumbers() { 
     ... 
    } 

    ... 

} 

Andernfalls Verwendung Schlüsselwort function definieren einen function:

function renderNumbers() { 
    ... 
} 

Es ist nur die Syntax von ES6.

Answer 2

Der Grund, dass Ihre Komponente diesen Fehler auftritt, ist aufgrund der folgenden: 1. Wenn Sie eine Funktion außerhalb einer ES6-Klasse definieren, müssen Sie das Schlüsselwort function verwenden. Wenn Sie dies tun, ist die this Referenz jedoch nicht definiert, wenn Sie diese Funktion aufrufen. 2. Wenn Sie eine Funktion innerhalb einer React-Komponente definieren (die nur eine ES6-Klasse ist), brauchen Sie das Schlüsselwort "function" nicht vor der Funktionsdefinition.

Option 1:

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

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

Option 2:

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

Der Grund, warum Sie den Fehler bekommen Sie wurden beschrieben ist, weil der Javascript-Compiler denkt, dass Sie "calling" und nicht "definieren" sind renderNumbers() . So ... es wird an die ) und erwartet entweder eine neue Zeile oder ;, aber es sieht eine { und wirft einen Fehler.

Vergessen Sie nicht, das this Schlüsselwort zu verwenden, wenn Sie 2 verwenden Option renderNumbers()