jsx中的if-else语句：ReactJS

Question

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

例如：

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

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

Answer 1

根据 DOC ：

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

基本规则：

JSX从根本上讲是syntactic sugar.。编译后，JSX表达式成为常规的JavaScript函数调用，并评估为JavaScript对象。我们可以通过将花括号括起来将任何JavaScript表达式嵌入JSX中。

但是只有表达式而不是语句，直接意味着我们不能在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>
    )
}