jsx 中的 if-else 语句：ReactJS

javascript reactjs react-native

2022-08-30 05:23:51

我需要更改渲染功能，并在给定特定状态时运行一些子渲染功能，

例如：

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

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

答案 1

根据DOC：

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

基本规则：

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

但只有表达式而不是语句，意味着我们不能直接在JSX中放置任何语句（if-else/switch/for）。

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

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

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

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

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

答案 2

您可以通过使用立即调用的函数表达式（IIFE）来实现您所说的内容

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

下面是工作示例：

但是，在您的情况下，您可以坚持使用三元运算符