如果条件，如何使用React Native使用else？

Question

如何在react render函数中使用条件语句？下面是我的示例代码。

render() {
            return (
              <View style={styles.container}>
                if(status == "En attente") {
                  <View style={{ backgroundColor: 'red', height: 50, width: 50 }}></View>
                }
                else if (status == "En cours") {
                  <View style={{ backgroundColor: 'green', height: 50, width: 50 }}></View>
                }
                else {
                  <View style={{ backgroundColor: 'blue', height: 50, width: 50 }}></View>
                }
              </View>
            )
          }

Answer 1

您可以使用三元运算符-?

render() {
    return ( <
        View style = {
            styles.container
        } >
        {(status == "En attente") ? < View style = {
            {
                backgroundColor: 'red',
                height: 50,
                width: 50
            }
        } > < /View> : ((status == "En cours") ? (<View style={{ backgroundColor: 'green', height: 50, width: 50 }}></View > ): ( < View style = {
            {
                backgroundColor: 'blue',
                height: 50,
                width: 50
            }
        } > < /View>))} <
        /View>
    )
}

Answer 2

使用三元运算符

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <SurfaceView
        android:id="@+id/cameraSurface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.doepiccoding.facedetection.CustomView 
        android:id="@+id/myCustomView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android:id="@+id/takeFoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="Capture"
        android:visibility="invisible" />

</RelativeLayout>

Answer 3

您应该在返回值之前进行检查。  例如：

for i in range(x):
    model.layers[x].trainable = False

因此，这非常简单。希望对您有帮助。 ：））

Answer 4

您可以根据自己的需求采用不同的方法

<View>内的多个条件

  _renderMultipleCondition = ({ item, index }) => {
    return (
      <View>
        <Text> Insert Multiple Condition </Text>
        {item.categoryName == "image" && <Component passProps={item.item} />}
        {item.categoryName == "video" && (
          <View>
            <Text>Condition meet</Text>
          </View>
        )}
      </View>
    );
  };   

其他方式

使用三元方法

_renderTernary = ({ item, index }) => {
    return (
      <View>
        <Text> Using ternary Condition </Text>
        {item.categoryName == "image" ? (
          <Component passProps={item.item} />
        ) : (
          <View>
            <Text>Else portion </Text>
          </View>
        )}
      </View>
    );
  };