在jsx: ReactJS中的if-jsx语句

Question

当给定特定状态时，我需要更改呈现函数并运行一些子呈现函数，

例如：

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

如何在不改变场景的情况下实现这一点，我将使用选项卡动态地更改内容。

Answer 1

根据文档

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

基本规则：

JSX从根本上说是句法糖。编译后，JSX表达式成为常规的JavaScript函数调用，并对JavaScript对象进行计算。我们可以将任何JavaScript表达嵌入到JSX中，方法是将它封装在大括号中。

但是只有表达式而不是语句，直接意味着我们不能将任何语句(if-else/开关/for)放入JSX中。

如果要有条件地呈现元素，则使用ternary operator，如下所示：

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

另一个选项是，从jsx调用一个函数，并将所有if-else逻辑放入其中，如下所示：

renderElement(){
   if(this.state.value == 'news')
      return <Text>data</Text>;
   return null;
}

render() {
    return (   
        <View style={styles.container}>
            { this.renderElement() }
        </View>
    )
}

Answer 2

您可以使用立即调用的函数表达式(IIFE)来实现您正在说的话。

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

下面是一个工作示例：

​

​

但是，在您的情况下，您可以继续使用三元操作符。

Answer 3

我发现这条路是最好的：

{this.state.yourVariable === 'news' && <Text>{data}<Text/>}