jsx 中的 ifelse 语句：ReactJS

发布于05月18日

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

例如:

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

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

推荐答案

根据100:

if-else语句在JSX中不起作用.这是因为JSX只是

基本规则:

JSX基本上是syntactic sugar.编译后，JSX表达式成为常规JavaScript函数调用，并对JavaScript对象求值.我们可以通过用大括号将JavaScript expression嵌入JSX中.

但是只有表达式而不是语句，直接意味着我们不能把任何语句(if-else/switch/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>
    )
}