jsx中的if-else语句：ReactJS

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