jsx 中的 if-else 语句：ReactJS

Question

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

例如：

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

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

原文由 user8026867 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 文档：

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>
 )
 }

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

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

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

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

              return null;
            })()}
        </View>
    )
}

这是工作示例：

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

原文由 Yusufbek 发布，翻译遵循 CC BY-SA 4.0 许可协议