反应本机内联 if 语句

Question

你好，我被困在这个问题上，我不知道如何在 react native 中做内联 if else 语句。

        {currentSlideIndex == 0 ? (
        <>
        <KeyboardAvoidingView style={{flex:1}} behavior='position'>
        

        <BlurView intensity={20} tint="light" >
              <Text style={styles.label}>Name</Text>
        <TextInput  
            value={name}
            onChangeText={onNameChange}
            style={styles.input}
        />
        </BlurView>
        </KeyboardAvoidingView>
        </>
      ):(
        <>
        <KeyboardAvoidingView style={{flex:1}} behavior='position'>
        

        <BlurView intensity={20} tint="light" >
              <Text style={styles.label}>Surname</Text>
        <TextInput  
            value={name}
            onChangeText={onNameChange}
            style={styles.input}
        />
        </BlurView>
        </KeyboardAvoidingView>
        </>
        
      )}

我想让它成为 currentslideIndex == 0 ，currentslideIndex == 1 ，currentslideIndex == 2。

Answer 1

你想要这样的东西：

{currentSlideIndex === 0 ? 
    (...) :
 currentSlideIndex === 1 ?
    (...) : //currentSlideIndex === 2
    (...)
}

您实际上可以嵌套三元组，以便有多个 if/else if 条件！

或：

您可以在渲染函数的 return 之前有一个变量，即

let keyboardAvoidingView;
if (currentSlideIndex === 0) {
    keyboardAvoidingView = ...
}
else if (currentSlideIndex === 1) {
    keyboardAvoidingView = ...
}
else {
    keyboardAvoidingView = ...
}

然后在渲染中，只渲染你的变量：

{keyboardAvoidingView}

Answer 2

试试下面的代码：

    {
        currentSlideIndex == 0 ? (
            <>
                {/* code for slide 0 */}
            </>
        ) : (currentSlideIndex == 1 ? (
            <>
                {/* code for slide 1 */}
            </>
        ) : (
                <>
                    {/* code for slide 2 */}
                </>
            )
        )
    }

Answer 3

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是函数调用和对象构造的语法糖。

所以在 Jsx 中它实际上变成了

render(if (true) return 0)
// This doesn't work because you can't put conditional inside function calls

但是如果你在 jsx 内部映射使用 { x.map(x => { if (true) return <Component //>)} 就可以了。对于条件语句，您只能使用三元。

但是您可以通过使用立即调用函数表达式 (IIFE) 来实现您所说的

render() {
    return (   
        <View style={styles.container}>
            {(() => {
              if (this.state == 'news'){
                  return (
                      <Text>data</Text>
                  )
              }
              
              return null;
            })()}
        </View>
    )
}

反应本机内联 if 语句

React native inline if statments

javascript

react-native