Javascript Switch Case 在 React Native 中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36693858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:26:59  来源:igfitidea点击:

Switch Case Doesn't work in React Native

javascriptswitch-statementreact-native

提问by Niklas Lindeke

I am relatively new to JS and RN. But I have gotten my self stuck in this mess.

我对 JS 和 RN 比较陌生。但我让自己陷入了这个烂摊子。

I am, in React Native, trying to call a rendering of a badge depicting ones "Rank" which will change depending on what the calling will use for id.

我在 React Native 中试图调用描绘“等级”的徽章的渲染,这将根据调用将用于 id 的内容而改变。

To do this, I am calling a js-file with a Switch in the function so that, depending on the id I call the Rank with, it will return different ones.

为此,我在函数中调用带有 Switch 的 js 文件,以便根据我调用 Rank 的 ID,它将返回不同的 ID。

My code currently looks like this:

我的代码目前看起来像这样:

'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/[email protected]')} style={{padding: 10}} />
          </View>
          );
      case 'bigone':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
          </View>
          );
      case 'smalltwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
          </View>
          );
      case 'bigtwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
            <Image source={require('../img/[email protected]')} 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;

And I call this simply by:

我简单地称之为:

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

But it always returns the default. And I have tried out many different variations in declaring the variable and so on. But I have no idea on where I have gone wrong.

但它总是返回默认值。我在声明变量等方面尝试了许多不同的变体。但我不知道我哪里出错了。

回答by agenthunt

The id is passed in props to the Rank Component. You need to access that this.props.id

id 在 props 中传递给 Rank 组件。你需要访问那个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/[email protected]')} style={{padding: 10}} />
          </View>
          );
      case 'bigone':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
          </View>
          );
      case 'smalltwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
          </View>
          );
      case 'bigtwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/[email protected]')} style={{padding: 10}} />
            <Image source={require('../img/[email protected]')} 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;