Switch Case在React Native中不起作用

Question

我對JS和RN相對比較陌生。但我已經讓自己陷入了混亂。

我是在React Native中，試圖調用一個描述「Rank」的徽章的渲染，這將根據調用將用於id的內容而改變。

爲此，我在函數中調用一個帶有Switch的js文件，這樣，根據我稱之爲Rank的id，它將返回不同的ID。

我的代碼目前看起來是這樣的：

'use strict'; 
import React, { 
    StyleSheet, 
    View, 
    Text, 
    ScrollView, 
    Image, 
    TouchableOpacity, 
} from 'react-native'; 

var colors = require('../Styles/colorscheme'); 
import {Actions} from 'react-native-router-flux'; 

var id = this.id; 
var Rank = React.createClass({ 
    render: function() { 
    switch (id) { 
     case 'smallone': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     case 'bigone': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     case 'smalltwo': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /> 
      <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     case 'bigtwo': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /> 
      <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     default: 
     return (
      <View style={styles.lvl2}> 
      <Text>Null</Text> 
      </View> 
     ); 
     } 
    } 
    }); 

var styles = StyleSheet.create({ 
    lvl2: { 
    flexDirection: 'row', 
    backgroundColor: colors.General.background, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    lvl1: { 
    padding: 10, 
    flexDirection: 'row', 
    backgroundColor: colors.General.hardline, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
}); 

module.exports = Rank; 

我只是把這種方式：

var Rank = require('../Components/Rank') 
. 
. 
. 
<Rank id={'smallone'} /> 

但它總是返回默認值。我在聲明變量等方面嘗試了很多不同的變體。但我不知道我錯在哪裏。

Answer 1

該id被傳遞給秩元件。你需要訪問this.props.id

'use strict'; 
import React, { 
    StyleSheet, 
    View, 
    Text, 
    ScrollView, 
    Image, 
    TouchableOpacity, 
} from 'react-native'; 

var colors = require('../Styles/colorscheme'); 
import {Actions} from 'react-native-router-flux'; 

var id = this.id; 
var Rank = React.createClass({ 
    render: function() { 
    switch (this.props.id) { 
     case 'smallone': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     case 'bigone': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     case 'smalltwo': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /> 
      <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     case 'bigtwo': 
     return (
      <View style={styles.lvl2}> 
      <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /> 
      <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} /> 
      </View> 
     ); 
     default: 
     return (
      <View style={styles.lvl2}> 
      <Text>Null</Text> 
      </View> 
     ); 
     } 
    } 
    }); 

var styles = StyleSheet.create({ 
    lvl2: { 
    flexDirection: 'row', 
    backgroundColor: colors.General.background, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    lvl1: { 
    padding: 10, 
    flexDirection: 'row', 
    backgroundColor: colors.General.hardline, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
}); 

module.exports = Rank;