反應 - 預期的意外令牌;

被拋出的錯誤是：意外的令牌，預計; （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

反應 - 預期的意外令牌;

回答

相關問題