当需要指定特定状态时,我需要更改渲染功能并运行一些子渲染功能,
例如:
render() { return ( <View style={styles.container}> if (this.state == 'news'){ return ( <Text>data</Text> ) } </View> ) }
如何在不更改场景的情况下实现这一点,我将使用标签动态更改内容。
根据 DOC :
if-else语句在JSX中不起作用。这是因为JSX只是函数调用和对象构造的语法糖。
基本规则:
JSX从根本上讲是syntactic sugar.。编译后,JSX表达式成为常规的JavaScript函数调用,并评估为JavaScript对象。我们可以通过将花括号括起来将任何JavaScript表达式嵌入JSX中。
但是只有表达式而不是语句,直接意味着我们不能在JSX内放置任何语句( if-else / switch / for)。
如果要有条件地渲染元素,请使用ternary operator,如下所示:
ternary operator
render() { return ( <View style={styles.container}> {this.state.value == 'news'? <Text>data</Text>: null } </View> ) }
另一个选择是,从中调用一个函数jsx,并将所有if-else逻辑放入其中,如下所示:
jsx
if-else
renderElement(){ if(this.state.value == 'news') return <Text>data</Text>; return null; } render() { return ( <View style={styles.container}> { this.renderElement() } </View> ) }