el error que arroja es: Token inesperado, esperado; (9:16) Esto apunta a la primera línea de la función renderNumbers(). ¿Qué tiene de malo mi sintaxis? Estoy un poco confundido en cuanto a lo que debe cambiarse aquí para que funcione.
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 } });Gracias por tu ayuda.
¿No deberías usar function renderNumbers() ? Parece que renderNumbers no es un método de clase Counter sino una función individual en su código.
Por cierto, renderNumbers se definió dos veces, aunque es legal y no la causa del problema.
Editar:
Si desea declarar renderNumbers() como método prototipo de la clase Counter , defínalo dentro de la clase:
export default class Counter extends React.Component { renderNumbers() { ... } ... } De lo contrario, use function de palabra clave para definir una función :
function renderNumbers() { ... }Es solo la sintaxis de ES6.
La razón por la que su componente está experimentando este error es por lo siguiente: 1. Si define una función fuera de una clase ES6, debe usar la palabra clave function . Sin embargo, si hace esto, la referencia this no estará definida cuando llame a esa función. 2. Si define una función dentro de un componente React (que es solo una clase ES6), no necesita la palabra clave "función" delante de la definición de la función.
Opción 1:
function renderNumbers() { return <Text>...</Text> } class Counter extends React.component { render() { /* Render code... */ } }Opcion 2:
class Counter extends React.component { renderNumbers() { return <Text>...</Text> } render() { /* Render code... */ } } La razón por la que recibió el error que describió es porque el compilador de Javascript cree que está "llamando" y no "definiendo" renderNumbers() . Entonces... llega a ) y espera una nueva línea o ; pero ve un { y arroja un error.
No olvide usar this palabra clave si usa la opción 2 para llamar a renderNumbers()
si dentro de un componente basado en funciones, declara funciones (antes de regresar), es bueno si usa la palabra clave de función (entonces no arrojará el error; requerido)