javascript - jsx : ReactJS 中的 if-else 语句

Question

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

例如:

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

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

Answer 1

根据 DOC :

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction.

基本规则:

JSX is fundamentally syntactic sugar. After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. We can embed any JavaScript expression in JSX by wrapping it in curly braces.

但只有表达式而不是语句，这意味着我们不能直接在 JSX 中放入任何语句 (if-else/switch/for) .

---

如果您想有条件地呈现元素，请使用三元运算符，如下所示:

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